Reference · Beginner
The button element
Use a native button for actions, form submission, disclosure controls, and other interactions that occur on the current page.
- Published
- Last checked
Definition
button represents an action. Browsers make it focusable, expose its name and
button role, and support keyboard activation. Use an anchor when the result is
navigation to another URL; use a button when the current interface changes or a
form is submitted.
Minimal syntax
<button type="button">Show workshop details</button>Inside a form, the default type is submit. Declare type="button" for a
control that must not submit, and use type="submit" when submission is the
intended action.
Important attributes
disabled prevents ordinary focus and activation. name and value contribute
data when a submit button initiates form submission. Form-association attributes
can target a form by id, but placing the control near the form is usually
easier to understand. A disclosure button can use aria-expanded and
aria-controls when those states match visible behavior.
Browser and accessibility behavior
Enter and Space activate a focused native button. The visible text normally becomes its accessible name, so concise action language such as “Save changes” is better than “Click here.” Icon-only buttons need a name that states the action. Do not remove the focus indicator or disable a button with color alone.
Decisions and trade-offs
Prefer native behavior over a clickable div. Rebuilding a button requires
role, focus, Enter and Space activation, disabled behavior, form behavior, and
state communication. Avoid disabling submit controls merely because a field is
incomplete when pressing submit could instead reveal clear validation guidance.
Common failures
- A utility button submits because its type was omitted.
- A generic element responds only to pointer clicks.
- An icon button exposes no accessible name.
- Loading state removes the label without announcing progress.
Verification checklist
Reach the button with Tab, inspect its accessible name and role, activate it with Enter and Space, and confirm the same authoritative result occurs with a pointer. In a form, verify the request includes only intended fields and that loading, success, failure, disabled, 200% zoom, and 320-pixel states remain visible and recoverable.