Buttons
Interactive button components with different variants, sizes, and states.
Brand CTA — GradientButton
All primary CTAs go through GradientButton (pill — the gradient family IS the CTA system). No solid-magenta CTAs exist. The shadcn variants below are app-internal controls for dense product chrome, not brand CTAs.
App controls (shadcn)
The dense, quiet controls for product chrome — the AuthZed Cloud dashboard (rakis). Color flows through semantic tokens only (no raw palette classes), and CTAs are monochrome stone — the brand gradient never appears in product surfaces. Verified against live rakis (authzed/internal @ cfc414b4).
Matches live rakis: these six variants (there is no creative button — that token drives status pills/spinners, not buttons); default and destructive both render monochrome stone (near-identical by design — quiet chrome); sizes at product density (h-9 / h-8 / h-10, small at text-xs).
Documented divergences: rakis inverts default to accent on hover and adds shadow-sm / shadow-xs; its focus ring is 1px stone vs the 2px magenta Sandworm canon — the open reconcile item, kept on the marketing canon here.
Sizes
States
With Icons
GradientButton Sizes
Both variants scale through sm, default, and lg.
Outline
Filled
Pill Button Vocabulary
Contextual pill buttons for situations where the gradient CTA is too loud. No dedicated component — compose with Tailwind matching the spec. Shown on a dark panel — these are built for dark marketing surfaces.
button-outline — stone-100 border, white on hover
button-subtle — stone-600 border (quieter)
Hero CTA Stack Pattern
The canonical marketing hero structure: mono-caps eyebrow → font-light h1 with magenta-600 emphasis → CTA pair (GradientButton outline + subtle secondary).
Authorization Platform
Every authorization use case. One system.
Fine-grained permissions at any scale. Built for teams that can't afford to get it wrong.
Note: There is no canonical solid-magenta button in Sandworm. Button variant="primary" (magenta-600 + violet-500 border) is deprecated by the spec. All brand CTAs go through GradientButton. For loud-on-dark solid CTAs, use GradientButton variant="filled" (warm gradient + stone-950 text).