Button

Dark

variant

size

state

interaction
VariantRestingHoverPressedFocus
Primary
Accent
Outline
Ghost
Destructive
Destructive ghost
Link
variant x state* spotlight affects accent only
variantRestingLoadingDisabledInvalidExpandedSpotlight*
PrimaryNot applicable
Accent
OutlineNot applicable
GhostNot applicable
DestructiveNot applicable
Destructive ghostNot applicable
LinkNot applicable

variant

size

state

interaction
VariantRestingHoverPressedFocus
Primary
Accent
Outline
Ghost
Destructive
Destructive ghost
Link
variant x state* spotlight affects accent only
variantRestingLoadingDisabledInvalidExpandedSpotlight*
PrimaryNot applicable
Accent
OutlineNot applicable
GhostNot applicable
DestructiveNot applicable
Destructive ghostNot applicable
LinkNot applicable

Code parity: explicit color, gradient and shadow transitions, 150ms ease-out. Primary, Accent, Outline and Destructive collapse depth on press; ghost and link stay flat. No scale or movement. Spotlight preserved. Static state previews.

Back to StoryLite