Button

Primary, secondary, ghost, danger and link buttons, plus icon-only and disabled states.

Button

Link button

Using the button accessibly

Use a button when an action happens in place; reach for accessible markup whenever a control triggers behaviour rather than navigation.

Do

  • Use <button> for actions and <a> for navigation.
  • Give icon-only buttons a visually-hidden text name.
  • Keep a visible :focus-visible ring and a real disabled state.

Don't

  • Don't build a button from a div or span with onclick.
  • Don't remove focus outlines or rely on graying out alone to disable.
  • Don't ship an icon-only button with no accessible name.

Build it right

  • Inside a form, set type="button" unless the control submits.
  • Make standalone targets at least 24 px, aiming for 44 px.
  • Use aria-pressed for toggle buttons.
  • Prefer a native disabled attribute over only visual graying.

The source styles for this component live in assets/css/components/button.css.