Form

Buttons

Published on

Description

Buttons trigger in-page actions such as form submission, toggling state, or opening dialogs. Use <button> for actions — never <a>, <div>, or <span>.

Example

Open in new tab
View HTML markup 
  <div role="group"><button type="button">verb</button> <button type="button" class="force active">verb (active)</button> <button type="button" class="force focus">verb (focus)</button> <button type="button" class="force hover">verb (hover)</button> <button type="button"><svg class="icon" aria-hidden="true">
      <use href="/img/icons.svg#search"></use>
    </svg><span class="visually-hidden">Verb</span></button> <button type="button"><svg class="icon" aria-hidden="true">
      <use href="/img/icons.svg#search"></use>
    </svg><span>Verb</span></button></div>

Accessibility

  • Links navigate (<a href>), buttons act (<button>), and submit buttons send form data (<button type="submit">). Using the wrong element breaks keyboard expectations.
  • Buttons activate on both Enter and Space. Links activate on Enter only.
  • Never use <div> or <span> with role="button" — this creates keyboard accessibility issues.
  • Ensure a minimum target size of 44x44 CSS pixels (WCAG 2.5.5 Level AAA, 24x24 minimum for 2.5.8 Level AA).
  • Don't disable submit buttons. Users cannot understand why interaction is blocked. Use error messages instead.

References

  • Links — for navigation
  • Dialog — for modal interactions triggered by buttons

Variables

None for form buttons