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

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

underline

leadingVisual?: false, label: Link, trailingVisual: 31742:155954, trailingVisual?: true, leadingVisual: 31764:4550, underline: false, variant: accent, 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

trailingVisual

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

leadingVisual

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

variant

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

bold

leadingVisual?: false, label: Link, trailingVisual: 31742:155954, trailingVisual?: true, leadingVisual: 31764:4550, underline: false, variant: accent, 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

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