Buttons & Actions
Use action hierarchy, sizes, disabled states, icon labels, and pending feedback consistently.
What you will learn
- Choose the correct button priority.
- Implement safe pending states.
- Label icon-only actions.
Visual hierarchy
Use one primary action per decision area. Secondary and ghost actions support it; destructive actions use the danger treatment and confirmation only when the consequence is meaningful.
tsx
<button className="component-btn primary" type="submit">Save changes</button>
<button className="component-btn ghost" type="button">Cancel</button>Correct HTML behavior
Set type explicitly. Form submission uses submit; toolbar and dialog controls normally use button. Use a link for navigation rather than simulating navigation in a button.
- Visible focus
- Minimum touch target
- Clear label
- Disabled reason
- No duplicate click while pending
Icon-only actions
An icon does not provide an accessible name. Add aria-label and, when useful, a tooltip that repeats the action.
tsx
<button type="button" aria-label="Close dialog" className="icon-button">
<IconX aria-hidden="true" />
</button>