Actions
Button
Triggers an action with clear hierarchy and tactile feedback.
Usage
Examples
Icon action
Name the action with aria-label. Hide the decorative SVG from assistive technology.
Loading
Keep the action label stable. Loading blocks repeated activation and sets aria-busy.
Disabled
Explain unavailable actions near the control. Disabled buttons leave the keyboard tab order.
Release review
Northstar / Production
Action hierarchy
Use one strong action. Keep supporting commands quieter.
Destructive actions
Give destructive commands their own place, away from the main action.
Action states
Loading and unavailable actions keep their dimensions and labels.
Control sizes
Icon actions
Use a clear accessible name for each icon-only action.
Recommendations
| Guidance | Practice |
|---|---|
| Do | Use default or brand for the main action. Keep supporting actions quieter. |
| Do | Give icon buttons an aria-label. Hide decorative icons from assistive technology. |
| Do | Keep the label when loading. Loading blocks activation and preserves keyboard focus. |
| Do | Tab moves focus. Enter or Space activates an enabled button. |
| Do | Button supports Server Components. Add event handlers in a Client Component. |
Usage boundaries
| Guidance | Boundary |
|---|---|
| Scope | Use a link for navigation, including when composing with render. |
| Scope | Use Toggle for a persistent pressed state. |
| Scope | Use Alert Dialog when a destructive action needs confirmation. |
API reference
Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.
| Prop | Type | Default | Description |
|---|---|---|---|
| | "default" | Sets the semantic appearance and interaction treatment. |
| | "default" | Sets control dimensions. Icon sizes require an accessible name. |
| | false | Shows progress while preserving the button width. |
| | false | Prevents interaction and communicates the disabled state. |
| | — | Visible label or icon content. Icon-only buttons need aria-label or aria-labelledby. |
| | — | Composes button behavior onto another element. |
| | true | Defaults to true; set false when render produces a non-button element. |
| | "button" | Sets the native button type when render is not used. |