Button

Starts an action.

The frame above shows the real web components, in the mode this site is in.

The design preview shows it next to every other web component.

When to use it

• Use primary for the one action a view is for, at most once per view. secondary is any other action, ghost one that should stay out of the way, and danger one that destroys something.
• Label it with a verb.
• A button is a rounded rectangle for pointer input and a capsule for touch. Pressing it also scales it down slightly, so the feedback does not depend on color.
• A disabled button is recolored with its own tokens rather than faded. A loading button keeps its label and its colors, because the action was accepted.

Example

import { Button } from "@acme/ui";

<Button variant="primary" onPress={save}>Save</Button>
<Button onPress={cancel}>Cancel</Button>
<Button variant="primary" loading>Saving</Button>

Options

The web component’s props. The other platforms take the same options under their own naming conventions.

Prop	Type	Notes
variant	"primary" | "secondary" | "ghost" | "danger"	Defaults to secondary.
size	"sm" | "md" | "lg"	Defaults to md. The heights depend on the input device.
disabled	boolean
loading	boolean	Shows a spinner and ignores presses. The label stays, so the button keeps its width.
fullWidth	boolean	Stretches to the width of its container.
type	"button" | "submit" | "reset"	Defaults to button.
onPress	() => void
aria-label	string	Names the button for assistive technology when it has no text.

Source

Platform	File
Web (React)	packages/ui/src/Button.tsx
Desktop (GPUI)	crates/acme-ui/src/components.rs
React Native	packages/ui-native/src/Button.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/Button.kt