How to build an accessible Button in React

Renders a native <button> so Enter/Space activation, focus, and role come from the platform; loading state uses aria-busy rather than removing the element so focus is preserved

When to use a Button

• Triggering an action or navigation the user initiates by click/press
• Submitting a form or confirming a decision

When not to use it

• Navigation between pages where a real link is semantically correct — use an anchor
• Toggling a binary setting — use Toggle; persistent selection — use Checkbox/Radio

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: <Button onClick={() => navigate("/x")}>Home</Button>

Prefer: <a href="/x">Home</a>

Buttons are for actions, links for navigation — assistive tech and the browser treat them differently

Example

<Button>Click me</Button>

See the full Button reference →