Primitives
Button primitive
Lower-level button styles and behaviour for custom control layouts.
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
inlineSize="full" 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.