Actions and status
LoadingButton
A Button-style action with an inline spinner, disabled loading state, and accessible loading label.
Curated demo
Reference
A Button-style action with an inline spinner, disabled loading state, and accessible loading label.
- Use LoadingButton when a button-triggered action is in progress and should not be submitted again.
- The loading label is available to assistive tech without visually replacing concise button text.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'danger' | 'primary' | Action variant. |
size | 'sm' | 'md' | 'lg' | 'md' | Button size. |
loading | boolean | false | Show loading state. |
loadingLabel | string | 'Loading' | Accessible loading label. |
spinnerPosition | 'start' | 'end' | 'start' | Spinner position. |
disabled | boolean | false | Disable the button. |
type | 'button' | 'submit' | 'reset' | 'button' | Button type. |
class | string | — | Additional CSS classes. |
Example snippet
<LoadingButton loading loadingLabel="Saving changes">Save</LoadingButton>