Forms
Button
Action trigger with seven variants, three sizes, optional icons, a loading spinner, and fullWidth. Built over MUI Button but exposes only the agnostic Hub API.
Examples
Variants
Loading preview
<Button variant="primary">Save</Button>
<Button variant="outlined">Cancel</Button>
<Button variant="danger">Delete</Button>Loading
Loading preview
<Button loading>Saving</Button>API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'danger' | 'outlined' | 'outlined-secondary' | 'text' | 'text-secondary' | primary | Visual style. |
size | 'small' | 'medium' | 'large' | medium | Size of the button. |
loading | boolean | false | Show a spinner and block interaction. |
fullWidth | boolean | false | Stretch to fill the container width. |
leftIcon / rightIcon | ReactNode | none | Icon before or after the label. |
disabled | boolean | false | Disable the button. |
Guidelines
Do
- Use one primary button per view for the main action.
- Use danger for destructive actions like delete.
Avoid
- Do not import Button from @mui/material; always use @hub/ds-components.
- Do not hardcode colors or sizes; the variant and size props are the API.