# Button (/docs/components/actions/button)
`Button` expects the Luke UI theme class at the app or root level. See
[Getting Started](/docs/getting-started).
```tsx
```
## Best practices [#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-and-appearance]
Tone communicates intent: `neutral` (default), `accent`, or `danger`. Appearance controls emphasis:
`solid` (default), `subtle`, or `ghost`. Every tone supports every appearance.
## Size [#size]
`Button` has two sizes: `medium` (default) and `small`.
## Icons [#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.
```tsx
import { Icon } from '@luke-ui/react/icon';
}>Add item;
```
## Disabled [#disabled]
Disabled buttons cannot be focused or pressed.
```tsx
```
## Pending [#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 [#full-width]
Set `isBlock` to make the button fill the inline size of its container.
```tsx
```
## Accessibility [#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 [#primitive]
Use the [button primitive](/docs/components/primitives/button) when you need full control over
children, custom loading states, render-prop children, or non-standard content.
## Props [#props]