Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

Button

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

On this page

  • Updated 4 May 2023
  • Stable

Playground

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

Props

NameTypeValuesDefault
variantVariantsecondary primary danger outline invisible secondary
sizeVariantmedium (default) small large large
stateVariantrest (default) focus hover pressed disabled rest (default)
alignContentVariantcenter start center
trailingVisualInstance swapEXTERNAL_COMPONENT
dropdown?Booleantrue false false
trailingVisual?Booleantrue false false
leadingVisual?Booleantrue false false
counter?Booleantrue false false
button textTextButton
leadingVisualInstance swapEXTERNAL_COMPONENT

variant

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
secondary
leadingVisual: 12515:40637, leadingVisual?: false, button text: Button, counter?: false, trailingVisual?: false, dropdown?: false, trailingVisual: 23829:88044, variant: primary, size: medium (default), state: rest (default), alignContent: center
primary
leadingVisual: 12515:40637, leadingVisual?: false, counter?: false, dropdown?: false, trailingVisual?: false, button text: Button, trailingVisual: 23829:88044, variant: danger, size: medium (default), state: rest (default), alignContent: center
danger
leadingVisual: 12515:40637, trailingVisual?: false, button text: Button, counter?: false, dropdown?: false, leadingVisual?: false, trailingVisual: 23829:88044, variant: outline, size: medium (default), state: rest (default), alignContent: center
outline
leadingVisual?: false, button text: Button, trailingVisual?: false, leadingVisual: 12515:40637, counter?: false, dropdown?: false, trailingVisual: 23829:88044, variant: invisible, size: medium (default), state: rest (default), alignContent: center
invisible

size

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
medium (default)
leadingVisual: 12515:40637, counter?: false, button text: Button, leadingVisual?: false, dropdown?: false, trailingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: small, state: rest (default), alignContent: center
small
leadingVisual: 12515:40637, leadingVisual?: false, button text: Button, counter?: false, trailingVisual: 23829:88044, dropdown?: false, trailingVisual?: false, variant: secondary, size: large, state: rest (default), alignContent: center
large

state

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
rest (default)
leadingVisual: 12515:40637, leadingVisual?: false, dropdown?: false, trailingVisual?: false, button text: Button, counter?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: focus, alignContent: center
focus
leadingVisual: 12515:40637, leadingVisual?: false, dropdown?: false, button text: Button, trailingVisual?: false, trailingVisual: 23829:88044, counter?: false, variant: secondary, size: medium (default), state: hover, alignContent: center
hover
leadingVisual: 12515:40637, trailingVisual: 23829:88044, counter?: false, leadingVisual?: false, button text: Button, dropdown?: false, trailingVisual?: false, variant: secondary, size: medium (default), state: pressed, alignContent: center
pressed
leadingVisual: 12515:40637, button text: Button, dropdown?: false, leadingVisual?: false, trailingVisual: 23829:88044, trailingVisual?: false, counter?: false, variant: secondary, size: medium (default), state: disabled, alignContent: center
disabled

alignContent

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
center
leadingVisual: 12515:40637, leadingVisual?: false, button text: Button, counter?: false, dropdown?: false, trailingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: start
start

trailingVisual

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
23829:88044

leadingVisual

leadingVisual: 12515:40637, trailingVisual?: false, counter?: false, dropdown?: false, button text: Button, leadingVisual?: false, trailingVisual: 23829:88044, variant: secondary, size: medium (default), state: rest (default), alignContent: center
12515:40637