Button primitive

Use the button primitive to build a custom button pattern. It provides Luke UI button styles and React Aria button behaviour. You own the child layout and loading treatment. For ordinary application actions, use Button.

Composition

Use the primitive when you need custom children, render-prop children, or your own loading layout. Button wraps its label for truncation, adds start and end content slots, and supplies a pending spinner. The primitive does not.

Appearance and size

Use tone and appearance to set visual emphasis. Use size to match nearby controls. Set isBlock when the button should take up its container's inline size. The primitive renders a native <button> by default and accepts the React Aria button API.

Pending

Set isPending to prevent another press. The control stays focusable and shows the muted pending treatment. The primitive does not add a spinner or replace its children. Add a clear busy cue in your custom content. Set isDisabled when the action cannot receive focus or respond to presses.

Accessibility

Give the button an accessible name through its visible text or an appropriate ARIA label. Keep the name stable when possible. If a custom pending treatment changes the action's meaning, update the name to reflect that state.

API