Actions and overlays

Button

components/ui/button

Actions in four variants and two sizes, with icons and a loading state.

Craft notes

Press feedback is a bottom-anchored scale gated by motion-safe; text never rescales
Icons are children; the base gap-2 handles spacing
Disabled is 40% opacity with no scale

Hover, press, focus and drag every state above, in both themes. The page toggle flips the tokens, not the component.

Every prop combination the component supports. The chip on each card is the exact props it passes.

Primary
variant="primary"
The filled action; the main call to action on a surface.
Secondary
variant="secondary"
Raised neutral action for supporting flows.
Ghost
variant="ghost"
No fill until hovered, for toolbars and dense rows.
Danger
variant="danger"
Destructive actions. Plays warning instead of tap, with a short shake.
Small
size="sm"
32px tall for dense layouts and inline actions.
Loading
loading
Shows a spinner, sets aria-busy and blocks repeat presses.
Custom sound
sound="copy"
Any sound from the library, for actions with their own meaning.
Silent
silent
Mutes this instance, for buttons that fire many times in a row.