primitive16 tokens12 stories
Button
Trigger for user actions; renders as <button> or <a> depending on context
Stories
Tokens
Design decisions specific to Button — the values that control its appearance across all theme axes.
TokenTypeReferenceValueUsed by
--button-padding-xdimension
{space.6}24px
Button
--button-padding-ydimension
{space.3}12px
Button
--button-outline-border-widthdimension
{border-width.medium}2px
Button
--button-secondary-backgroundcolor
transparenttransparent
Button
--button-secondary-foregroundcolor
{color-accent-default}#292524
Button
--button-secondary-bordercolor
{color-accent-default}#292524
Button
--button-secondary-background-hovercolor
{color-accent-default}#292524
Button
--button-ghost-backgroundcolor
transparenttransparent
Button
--button-ghost-bordercolor
transparenttransparent
Button
--button-spinner-durationduration
750ms750ms
Button
--button-wipe-duration-enterduration
550ms550ms
--button-wipe-duration-curveduration
220ms220ms
--button-wipe-duration-exitduration
400ms400ms
--button-wipe-duration-curve-outduration
180ms180ms
--button-arrow-nudgedimension
2px2px
Button
--button-glow-sizedimension
52px52px
Button