Skip to content
Primer Design System

Primer Design System

Button

Button is used to initiate actions on a page or form.

On this page

  • Updated 23 Nov 2023

Playground

No preview available
leadingVisual?
trailingVisual?
dropdown?
counter?
variant
size
state
alignContent

Props

NameTypeValuesDefault
trailingVisualInstance swap-EXTERNAL_COMPONENT
leadingVisual?Booleantrue false false
trailingVisual?Booleantrue false false
dropdown?Booleantrue false false
counter?Booleantrue false false
leadingVisualInstance swap-EXTERNAL_COMPONENT
variantVariantprimary secondary danger invisible secondary
sizeVariantsmall medium (default) large medium (default)
stateVariantrest (default) focus hover pressed disabled inactive rest (default)
alignContentVariantcenter start center

trailingVisual

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
26704:84275

leadingVisual

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
26704:84285

variant

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
secondary
leadingVisual: 26704:84285, counter?: false, leadingVisual?: false, dropdown?: false, trailingVisual?: false, trailingVisual: 26704:84275, variant: primary, size: medium (default), state: pressed, alignContent: center
primary
leadingVisual: 26704:84285, leadingVisual?: false, trailingVisual: 26704:84275, counter?: false, trailingVisual?: false, dropdown?: false, variant: danger, size: medium (default), state: pressed, alignContent: center
danger
trailingVisual?: false, leadingVisual?: false, leadingVisual: 26704:84285, counter?: false, dropdown?: false, trailingVisual: 26704:84275, variant: invisible, size: medium (default), state: pressed, alignContent: center
invisible

size

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
medium (default)
leadingVisual: 26704:84285, leadingVisual?: false, trailingVisual: 26704:84275, trailingVisual?: false, dropdown?: false, counter?: false, variant: secondary, size: small, state: pressed, alignContent: start
small
leadingVisual?: false, leadingVisual: 26704:84285, trailingVisual?: false, counter?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: large, state: pressed, alignContent: start
large

state

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
pressed
leadingVisual: 26704:84285, leadingVisual?: false, trailingVisual?: false, trailingVisual: 26704:84275, counter?: false, dropdown?: false, variant: secondary, size: medium (default), state: disabled, alignContent: center
disabled
leadingVisual: 26704:84285, trailingVisual?: false, counter?: false, dropdown?: false, leadingVisual?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: rest (default), alignContent: center
rest (default)
leadingVisual: 26704:84285, leadingVisual?: false, trailingVisual?: false, dropdown?: false, counter?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: focus, alignContent: center
focus
leadingVisual: 26704:84285, leadingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, trailingVisual?: false, counter?: false, variant: secondary, size: medium (default), state: hover, alignContent: center
hover

alignContent

leadingVisual: 26704:84285, leadingVisual?: false, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 26704:84275, variant: secondary, size: medium (default), state: pressed, alignContent: start
start
leadingVisual: 26704:84285, counter?: false, leadingVisual?: false, dropdown?: false, trailingVisual?: false, trailingVisual: 26704:84275, variant: primary, size: medium (default), state: pressed, alignContent: center
center