Actions

Button

Starts an action. Five looks for five jobs, three sizes, icons and a loading state.

Ant Design: Button

import { Button } from '@alea/ui';

Examples

Variants

Primary for the main action, secondary (the chip) for the second, ghost for the rest, danger for destructive actions and link for low emphasis.

With icons

Icons before or after the label. They are hidden from screen readers; the label names the button.

Loading and disabled

isLoading keeps the width and the name, shows a spinner and ignores presses until done.

Full width

For forms on small screens and stacked layouts.

Props

`Button` props

Show 11 React Aria props

The action button: five looks, three sizes, icons and a loading state.

Prop	Type	Default	Description
`fullWidth`	`boolean`	-	Stretches to the width of its container.
`iconEnd`	`ReactNode`	-	Icon after the label.
`iconStart`	`ReactNode`	-	Icon before the label.
`isLoading`	`boolean`	-	Shows a spinner, keeps the width and tells screen readers it is busy.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 32 px, md 40 px (default), lg 48 px.
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger" \| "link"`	`'primary'`	primary: the dark gradient button; secondary: the chip (white on dark, black on light); ghost: outlined; danger: destructive; link: text only.

Built on React Aria Button: a real button element, pressed by mouse, touch, Enter and Space, with focus ring only for keyboard focus.
While loading, the button keeps its accessible name and is announced as busy, and presses are ignored.
Disabled buttons are not focusable; when the reason matters, keep it enabled and explain on press instead.

Keyboard

Key	Does
`Tab`	Moves focus to the button
`Enter` or `Space`	Presses it

Do and don't

One primary button per view: the action you want people to take.
Write the action as a verb: Save changes, not OK.
Use danger only for actions that lose data, and confirm them.

Don't

Don't use a button to go to another page: use Link.
Don't put two primary buttons side by side.
Don't rely on color alone to tell danger apart; the label says it.

In Figma

Button component set: Variant (Primary, Secondary, Ghost, Danger, Link) × Size (Small, Medium, Large) × State (Default, Hover, Pressed, Focus, Disabled, Loading), with boolean properties for the icons.