How to use buttons

Use a real button

A button has built-in keyboard, focus, and activation behavior. Use it for actions; use an anchor for navigation.

<button type="button">Show preview</button>
<button type="submit">Create account</button>
<button type="reset">Reset form</button>

Always set the type

Inside a form, the default type is submit. Set type="button" for JavaScript actions to prevent accidental submission.

Give it an accessible name

Visible action text is best. An icon-only button needs an explicit name, and decorative SVG should be hidden from assistive technology.

<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Preserve interaction cues

• Keep a strong visible keyboard focus indicator
• Make targets large enough to activate comfortably
• Use disabled only when users understand why
• Communicate loading and success states without changing labels unpredictably