Triggers an action: submitting a form, opening a dialog, running a search.
Labels are verbs - "Save role", not "OK". An icon on its own is IconButton, not a Button with no children: the two have different hit areas and different accessible names.
loading keeps the label in place rather than replacing it with a spinner, so the button does not change width while a request is in flight, and sets aria-busy for anything listening.
import { Button } from '@redrob-labs/ui';| Prop | Type | Notes |
|---|---|---|
variant |
'primary' | 'secondary' | 'ghost' | 'danger' |
Visual weight. One primary per view: it names the action the screen is about. |
size |
'sm' | 'md' | 'lg' |
sm 32px, md 40px, lg 48px. md everywhere except toolbars and table rows. |
shape |
'rounded' | 'pill' |
Fully rounded. One prominent action per view. |
emphasis |
boolean |
Soft brand halo around the one action a view is about. |
loading |
boolean |
Disables the button, swaps the leading icon for a spinner and keeps the label. |
iconLeft |
React.ReactNode |
|
iconRight |
React.ReactNode |
|
fullWidth |
boolean |