Button
The Button component is used to trigger actions.
Usage
Default Button
<Button>Primary</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Button label or node content. |
| icon | ReactNode | - | Optional icon component displayed in the button. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme color of the button. |
| state | "" | "success" | "error" | "warning" | - | Visual state indicator (success, warning, error, etc). |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the button. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Rounding of the button corners. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Button shadow style. |
| outline | boolean | false | If true, renders the button with an outline style. |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | - | Click event handler. |
| className | string | - | Additional CSS class(es) for custom styling. |
| disabled | boolean | false | If true, disables the button. |
| loading | boolean | false | If true, shows a loading spinner and disables interaction. |
| fullWidth | boolean | false | If true, button stretches to 100% width of its container. |
| href | string | - | If provided, renders the button as a link with this URL. |
| isExternal | boolean | false | If true, external link opens in a new tab (used with href). |
| type | "button" | "submit" | "reset" | "button" | Button type (button, submit, reset). |
| ariaLabel | string | - | Custom ARIA label for accessibility. |
| data-testid | string | "button" | Custom test ID for unit/integration tests. |