Button

Actions

Overview

The hard-shadowed action: a 3px border edge, radius, shadow-sm and 700 weight. On hover it sinks 2px into its shadow (shadow-pressed, duration-press).

Live example

Hover a button, tab to it, and press Enter or Space.

Usage

Use primary (accent fill, accent-foreground text) for the one action a view exists for, quiet (card) for the rest, and danger (destructive) only for an action that cannot be undone. Say what it does: "Erase account".
Verb first, sentence case. Never two primary buttons in one view.
If the button is only a visual icon you can use sr-only to hide the accessible name of the button or an aria-label, then it should go along with a tooltip explaining the purpose for sighted users. The icon should have a size="icon" (a 56px square).
Targets are at least 44px (min-block-size: 2.75rem). Focus is the focus-halo shadow. Under prefers-reduced-motion the button does not move.
A disabled button drops to 50% opacity and keeps its edge.

Accessibility

This section is still in progress.

Link and button

References