Loading…

Button

Triggers an action or event, with variants for every level of emphasis.

Foundations
1 file
2 npm packages
Accessibility notes

Playground

Installation

The CLI installs spinner as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add button

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Button } from "@/components/ui/button";

Examples

Every example the tests run, live and operable, side by side.

Default
Variants
Sizes
With Icons
Loading
Loading Across Variants
Disabled
As Link
Icon Only
Smooth Button
Depth Press

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Button>

Prop	Type	Default
`loading` Shows a spinner and suppresses activation. Unlike `disabled`, a loading button stays focusable: taking focus away from the control a user just activated strands their keyboard position, and the state is transient by definition. Activation is blocked via `aria-disabled` plus a guarded click handler.	`boolean`	`false`
`press`	`"scale" \| "depth" \| "none"`	`"scale"`
`shape`	`"default" \| "pill" \| "square"`	`"default"`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"`	`"md"`
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link" \| "soft" \| "gradient"`	`"primary"`
`asChild` Renders the child element as the button instead of a `<button>`, keeping every style and behaviour. Use it for links that should look like buttons.	`boolean`	`false`

Plus every attribute of <button>.

Accessibility

Keyboard activatable via Enter and Space. The loading state uses aria-disabled and aria-busy rather than the disabled attribute, so focus is never stranded mid-action. Use `size="icon"` only with an accessible name from aria-label or visually hidden text.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

loading

Shows a spinner and suppresses activation. Unlike disabled, a loading button stays focusable: taking focus away from the control a user just activated strands their keyboard position, and the state is transient by definition. Activation is blocked via aria-disabled plus a guarded click handler.

boolean

false

press

"scale" | "depth" | "none"

"scale"

shape

"default" | "pill" | "square"

"default"

size

"sm" | "md" | "lg" | "icon" | "icon-sm"

"md"

variant

"primary"

asChild

Renders the child element as the button instead of a <button>, keeping every style and behaviour. Use it for links that should look like buttons.

boolean

false