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

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

underline

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

trailingVisual

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

leadingVisual

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

variant

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

bold

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

size

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