# Button The ranked action. One primary per screen, then secondary, tertiary, ghost and the two danger forms. Labels say what happens: "Publish to brands", "Save draft", "Sync cloths". - **Group:** Actions · **family:** `form-controls` · **shadcn:** Button - **Build:** shadcn `Button` (cva) with `@radix-ui/react-slot` for `asChild`. Add variants `tertiary` and `dangerQuiet`; map `default`→primary, `outline`→secondary, `destructive`→danger. - **In apps/admin today:** `apps/admin/src/components/ui/button.tsx` exists (h-9 = 36px, `hover:bg-primary/90`). Restyle: heights 34/40/48, Archivo 600, `--primary-hover` on hover, `--e-btn` shadow, press shift. - **Client component:** no. Server-renderable; only the click handler makes its parent a client component. ## Content rules - Verb first, the object after: "Publish to brands", "Save draft", "Sync cloths". - Sentence case, no full stop, no exclamation mark. - Loading labels use the progressive verb: "Publishing…", "Syncing…". ## Do - One `btn-primary` per screen or sheet. - Rank left to right: tertiary, secondary, primary (primary at the end of the row). - Keep the danger primary inside the confirm that names the consequence. ## Don't - Two primaries side by side. - "OK", "Submit" or "Click here". - A glow, gradient or coloured shadow on any button. - Hide a disabled reason; say why in help text or a tooltip. ## Motion - Colour and border on `--motion-hover` (120ms, `--ease-standard`). - Press: `translateY(var(--press-shift))`, 1px, on `--motion-press` (80ms). - Focus ring fades in on `--motion-focus` (140ms). - **No glow.** The sheen belongs to the sidebar only; a button never gets an outer or inner glow. ## Accessibility - **Keyboard:** Enter and Space activate. Tab order follows reading order; the primary is last in a footer row. - **ARIA:** Use a real `