Button

Button triggers an action, such as saving a form, opening a dialog, or deleting an item. Use Link when the interaction takes someone to another URL or route.

import { Button } from '@luke-ui/react/button';

<Button>Save changes</Button>;

Appearance

Use appearance to set a button's visual weight. solid is the default. Choose subtle or ghost for secondary actions that should recede beside the main action. Appearance sets emphasis; it does not communicate intent.

Tone

Use tone to communicate intent. neutral is the default, accent identifies a primary action, and danger marks a destructive one. Tone and appearance are independent, so every combination is available.

Size

medium is the default size. Use small in dense toolbars, tables, and other compact interfaces. Keep related controls at the same size.

Block layout

Set isBlock when the button should fill the inline size of its container. This is useful for a primary action at the end of a narrow form or panel.

<Button isBlock>Continue</Button>

Icons

Use startIcon or endIcon with a visible label. Button supplies the icon size, so the nested Icon does not need its own size prop. Use IconButton only when the icon is familiar without a text label.

import { Icon } from '@luke-ui/react/icon';

<Button startIcon={<Icon aria-hidden name="add" />}>Add item</Button>;

Pending and disabled states

Set isPending while an action is running. The button remains focusable, ignores further presses, and overlays its label with a spinner. Update the visible label when the status matters, for example from “Save” to “Saving”.

Set isDisabled only when the action is unavailable. Disabled buttons cannot receive focus or be pressed.

Accessibility

The visible label provides the accessible name, so most buttons do not need aria-label. Write a label that describes the action, such as “Save changes” or “Delete account”, rather than a vague label such as “OK”.

The spinner is hidden from assistive technology. Change the label when pending status needs to be announced.

Button primitive

Button is the composed component for application UI. It wraps its label for truncation, provides icon slots, and supplies the pending spinner. Use the button primitive when building a custom control and you need to own the child layout or loading treatment.