Skip to content
Primer Design System

Primer Design System

Link

Links are used to apply styles to hyperlink text.

On this page

  • Updated 11 Mar 2024

Playground

No preview available
trailingVisual?
underline
leadingVisual?
bold
variant
size

Props

NameTypeValuesDefault
labelText-Link
trailingVisual?Booleantrue false false
underlineBooleantrue false true
trailingVisualInstance swap-EXTERNAL_COMPONENT
leadingVisualInstance swap-EXTERNAL_COMPONENT
leadingVisual?Booleantrue false false
variantVariantaccent text default text muted accent
boldVariantfalse true false
sizeVariantnormal small normal

label

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
Link

underline

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
true
leadingVisual?: false, label: Link, trailingVisual: 31742:155954, trailingVisual?: true, leadingVisual: 31764:4550, underline: false, variant: accent, bold: false, size: normal
false

trailingVisual

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
31742:155954

leadingVisual

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
31764:4550

variant

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
text default
leadingVisual?: false, trailingVisual: 31742:155954, trailingVisual?: true, label: Link, leadingVisual: 31764:4550, underline: true, variant: text muted, bold: false, size: normal
text muted
leadingVisual?: false, label: Link, trailingVisual: 31742:155954, trailingVisual?: true, leadingVisual: 31764:4550, underline: false, variant: accent, bold: false, size: normal
accent

bold

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
false
label: Link, leadingVisual?: false, trailingVisual: 31742:155954, trailingVisual?: true, leadingVisual: 31764:4550, underline: true, variant: accent, bold: true, size: normal
true

size

label: Link, leadingVisual: 31764:4550, trailingVisual?: true, trailingVisual: 31742:155954, leadingVisual?: false, underline: true, variant: text default, bold: false, size: small
small
leadingVisual?: false, trailingVisual: 31742:155954, trailingVisual?: true, label: Link, leadingVisual: 31764:4550, underline: true, variant: text muted, bold: false, size: normal
normal