← Components

Button

Trigger an immediate action.

States

defaulthoverfocusactivedisabled

Tokens

background{semantic.action.primary.background}
foreground{semantic.action.primary.foreground}
hoverBackground{semantic.action.primary.backgroundHover}
radius{radius.md}
paddingInline{space.4}
focusRing{semantic.focus.ring}

Accessibility

{
  "ruleIds": [
    "STYLE-A11Y-001",
    "STYLE-A11Y-002",
    "STYLE-A11Y-009",
    "STYLE-A11Y-010"
  ],
  "keyboard": "Enter and Space activate the button.",
  "focusVisible": true,
  "minimumTarget": "40px"
}

Do / Don't

Do

  • Use one primary action per local decision area.

Don't

  • Do not use a button for navigation.