Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Inputs & forms
Trigger an action or navigation.
A versatile button component supporting multiple visual variants (filled, outlined, ghost, link), semantic color types, and three sizes.
Key features:
- Left/right icons with
leftIconandrightIconprops - Loading spinners and disabled states
IconButtonfor badge overlaysToggleButtonfor on/off statesButtonGroupfor merged, radio, or toggle grouping
Loading preview…
When to use it
- The single primary action on a page or in a dialog
- Secondary actions next to a primary one (Cancel, Back)
- Compact toolbars and inline row actions (ghost / link)
- Actions with a leading or trailing icon (New, Upload, Next)
- Icon-only buttons and loading / busy states
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'filled' | 'outlined' | 'ghost' | 'link' | 'filled' | Visual style of the button |
type | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'primary' | Semantic color type |
size | 'small' | 'normal' | 'large' | 'normal' | Button size |
leftIcon | ReactNode | — | Icon rendered before the label |
rightIcon | ReactNode | — | Icon rendered after the label |
iconOnly | boolean | false | Render as a square icon-only button |
loading | boolean | false | Show a loading spinner and disable interaction |
disabled | boolean | false | Disable the button |
active | boolean | false | Force the active/pressed visual state |
fullWidth | boolean | false | Stretch to fill parent width |
minWidth | number | — | Minimum width in pixels |
onClick | (e: MouseEvent) => void | — | Click handler |
htmlType | 'button' | 'submit' | 'reset' | 'button' | HTML button type attribute |
Notes
- ButtonGroup supports mode="radio" (single) and mode="toggle" (multi) selection.
- IconButton accepts a badge prop for notification counts.
- Set iconOnly with a title prop for accessible icon buttons.
Presets