AXIS Design System Lab
← All patterns

candidate · greenhouse-ui-platform

efeonce.button

Version 0.1.1. A published contract for products built by agents and humans.

HTML + CSS reference0.1.1

Reference implementation

Buttons

✓ Auto Layout

Buttons allow users to take actions and make choices with a single tap.

AXIS

Light mode button board

large: 48px · controlText.lgmedium: 38px · controlText.mdsmall: 30px · controlText.sm

Variants

DefaultLabelOutlineTextVariants

Icons

DefaultLeft IconRight IconBoth IconDefaultLabelOutlineText

Sizes

LargeMediumSmallDefaultLabelOutlineText

Colors

PrimarySecondaryErrorWarningInfoSuccessDefaultLabelOutlineText

States

DefaultHoverActiveFocusDisabledDefaultLabelOutlineText

Active button style: transform scale(0.98). Reduced motion removes transitions while preserving state contrast.

Dark mode button board

large: 48px · controlText.lgmedium: 38px · controlText.mdsmall: 30px · controlText.sm

Variants

DefaultLabelOutlineTextVariants

Icons

DefaultLeft IconRight IconBoth IconDefaultLabelOutlineText

Sizes

LargeMediumSmallDefaultLabelOutlineText

Colors

PrimarySecondaryErrorWarningInfoSuccessDefaultLabelOutlineText

States

DefaultHoverActiveFocusDisabledDefaultLabelOutlineText

Active button style: transform scale(0.98). Reduced motion removes transitions while preserving state contrast.

Framework-agnostic reference. Consumer adapters are reviewed against it.

Promotion evidence

Before stable

  • fixture:button-light-dark-board
  • fixture:button-variants-icons-sizes-tones
  • fixture:button-states
  • desktop-mobile-keyboard
  • reduced-motion
  • Keyboard and focus
  • 390 px responsive
  • Reduced motion