Default Button
default-button.tsx
<Button>Primary</Button>Button
The Button component is used to trigger actions.
Usage & Examples
Props API
40 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
aria-atomic | boolean | No | aria | — | Whether assistive technologies should treat live updates as atomic. |
aria-busy | boolean | No | aria | — | Indicates whether the element is busy. Usually derived automatically from `loading`. |
aria-controls | string | No | aria | — | Identifies the element controlled by this button, such as a menu, dialog, accordion panel, or disclosure region. |
aria-current | boolean | "page" | "step" | "location" | "date" | "time" | No | aria | — | Indicates that this button represents the current item within a set. Most useful when rendering as a link-like control. |
aria-describedby | string | No | aria | — | References the element(s) that describe this button. Useful for extra instructions or status messaging. |
aria-disabled | boolean | No | aria | — | Indicates whether the control is perceivable as disabled to assistive tech. Usually derived automatically when rendered as a disabled link. |
aria-expanded | boolean | No | aria | — | Indicates whether the controlled element is expanded or collapsed. Commonly used for disclosure buttons. |
aria-haspopup | boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | No | aria | — | Indicates that activating the button opens a popup such as a menu, dialog, listbox, tree, or grid. |
aria-label | string | No | aria | — | Accessible label for screen readers. Required for icon-only buttons. |
aria-labelledby | string | No | aria | — | References the element(s) that label this button. Useful when the visible label lives outside the button. |
aria-live | "off" | "polite" | "assertive" | No | aria | — | Optional live-region politeness for loading or dynamic content updates. |
aria-pressed | boolean | "mixed" | No | aria | — | Indicates the pressed state for toggle buttons. |