Button

Clear actions with accessible variants, sizes and states.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add button

What add button installs alongside the component. The CLI skips any you already have in a compatible version.

5 examples · 1 component

From primary emphasis to a text-style action, each variant brings order to the interface.

An anchor can look like a button while retaining link semantics and browser navigation.

Small, default, large and icon for square actions.

The spinner replaces the text without changing the width and prevents double clicks.

Disabled actions with native semantics.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`variant` Visual treatment and hierarchy of the action.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size` Button size; icon for single-icon actions.	`"sm" \| "default" \| "lg" \| "icon"`	`"default"`
`loading` Shows a spinner, disables the button and keeps its width.	`boolean`	`false`
`disabled` Disables interaction.	`boolean`	`false`

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Surface per variant; 1 px border on outline and neutral variants.
Hover	Subtle surface change with a 120 ms color transition.
Focus visible	2 px outline in the ring color, merged with the border, keyboard only.
Active	Press feedback without shifting the content.
Loading	loading shows the Spinner, exposes aria-busy, keeps the width and prevents double submission.
Disabled	disabled removes interaction and takes the button out of the Tab order.

Use text that describes the action. With size="icon" or an icon-only button, provide an aria-label.

loading exposes aria-busy, prevents duplicate submissions and keeps the button width; the spinner respects prefers-reduced-motion.

For navigation, pass an anchor or framework link to render; it keeps link semantics. Set type="submit" for form actions.