Skip to main content
MACAW

Button

Atombeta@macaw-ds/ui · since 0.1.0

Triggers an action. Not navigation; for links use asChild with an anchor.

Open gallery

The action primitive. Four variants carry the weight of an action (one primary per view), three sizes match the control heights, and `loading` turns the button busy without losing its label. Icon-only buttons require an accessible name at the type level.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

Motion is visible when loading is on.

What moves: Background and border colours ease on hover and press; the loading spinner rotates.

Examples
import { Button } from '@macaw-ds/ui';

<Button>Pay invoice</Button>

Controls

variant

Visual weight. primary is the one main action on a view; secondary for the rest; ghost for low-emphasis actions in toolbars and rows; destructive for irreversible actions, always behind confirmation.

size

28, 32 or 40 px tall. md is the default for forms and toolbars; sm inside table rows; lg for page-level calls to action.

Shows a spinner in place of the start icon, sets aria-busy and aria-disabled, and ignores clicks and form submits. The button stays focusable and the label stays visible.

Not interactive. Prefer explaining why nearby.

Square button whose only child is an Icon. Requires aria-label.

The label. Verb first: "Pay invoice", "Export".

Examples

The named exports of the examples file, rendered as they ship.

  • Default
  • Action bar
  • As link
  • Sizes
  • States
  • Variants
  • With icons