Button
Action button with semantic tone and appearance options.
Button expects the Luke UI theme class at the app or root level. See
Getting Started.
<Button>Save</Button>Best practices
| Guidance | Practices |
|---|---|
| Do | Use tone="accent" for the main action. Use a subtle or ghost appearance for secondary actions. |
| Do | Write a label that names the action, such as "Save changes" or "Delete account". Avoid vague labels like "OK". |
| Do | Set isPending while an action is in flight so the user can see that work is still happening. |
| Don't | Use Button for navigation. If the control only moves the user to another page, use Link. |
Tone and appearance
Tone communicates intent: neutral (default), accent, or danger. Appearance controls emphasis:
solid (default), subtle, or ghost. Every tone supports every appearance.
Size
Button has two sizes: medium (default) and small.
Icons
Use startIcon and endIcon to place an icon before or after the label. The icon inherits the
button size, so the icon does not need its own size prop.
import { Icon } from '@luke-ui/react/icon';
<Button startIcon={<Icon name="add" aria-hidden />}>Add item</Button>;Disabled
Disabled buttons cannot be focused or pressed.
<Button isDisabled>Save</Button>Pending
Set isPending while an action is in flight. A spinner replaces the label. The button remains
focusable and reports its pending state, but cannot be pressed again. It uses the same muted visual
treatment as a disabled button while keeping the spinner visible.
Full width
Set isBlock to make the button fill the inline size of its container.
<Button isBlock>Save</Button>Accessibility
Button wraps its children in Text, so visible text usually provides the accessible name. You
normally do not need aria-label.
The pending spinner is aria-hidden and does not announce busy state to screen readers. If screen
reader users need to hear the pending state, change the label text itself, for example to "Saving",
while isPending is set.
Primitive
Use the button primitive when you need full control over children, custom loading states, render-prop children, or non-standard content.
Props
Prop
Type