Button
The Button component is used to trigger actions.
Usage
Default Button
<Button>Primary</Button>Props
| Type | Description | |
|---|---|---|
| _target | React.HTMLAttributeAnchorTarget | Optional target for link rendering. Example: "_blank", "_self", "_parent", "_top" |
| aria-atomic | boolean | Whether assistive technologies should treat live updates as atomic. |
| aria-busy | boolean | Indicates whether the element is busy. Usually derived automatically from `loading`. |
| aria-controls | string | 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" | Indicates that this button represents the current item within a set. Most useful when rendering as a link-like control. |
| aria-describedby | string | References the element(s) that describe this button. Useful for extra instructions or status messaging. |
| aria-disabled | boolean | Indicates whether the control is perceivable as disabled to assistive tech. Usually derived automatically when rendered as a disabled link. |
| aria-expanded | boolean | Indicates whether the controlled element is expanded or collapsed. Commonly used for disclosure buttons. |
| aria-haspopup | boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | Indicates that activating the button opens a popup such as a menu, dialog, listbox, tree, or grid. |
| aria-label | string | Accessible label for screen readers. Required for icon-only buttons. |
| aria-labelledby | string | References the element(s) that label this button. Useful when the visible label lives outside the button. |
| aria-live | "off" | "polite" | "assertive" | Optional live-region politeness for loading or dynamic content updates. |
| aria-pressed | boolean | "mixed" | Indicates the pressed state for toggle buttons. |
| as | React.ElementType<any, keyof React.JSX.IntrinsicElements> | Optional element or component override. Example: "a", "button", Link |
| children | ReactNode | Child content to display inside the button. |
| className | string | Additional class name(s) for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| disabled | boolean | Whether the button should be disabled. |
| fullWidth | boolean | Whether the button should take up the full width of its container. |
| href | string | If provided, button will render as a link pointing to this href. |
| icon | ComponentType<{ className?: string; "aria-hidden"?: boolean; focusable?: boolean; }> | Optional icon component to render inside the button. |
| isExternal | boolean | If true, opens the link in a new tab (used with `href`). |
| loading | boolean | Whether to show a loading indicator instead of the children. |
| loadingLabel | string | Optional accessible text announced while loading. Defaults to "Loading" in the component if not provided. |
| onClick | ((e: React.MouseEvent<HTMLElement>) => void) | Click event handler for the button. |
| outline | boolean | Whether to use outline styling. |
| rounding | RoundingType | Rounding style for the button ('none' | 'small' | 'medium' | 'large' | 'full'). |
| shadow | ShadowType | Shadow style for the button ('none' | 'light' | 'medium' | 'strong' | 'intense'). |
| size | SizeType | Size of the button ('xs' | 'small' | 'medium' | 'large' | 'xl'). |
| state | StateType | State of the button ('success' | 'error' | 'warning' | 'disabled' | ''). |
| theme | ThemeType | Theme style of the button ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear'). |
| type | "button" | "reset" | "submit" | Button type for native `<button>` elements ('button' | 'reset' | 'submit'). |