Components
Button
Six variants, each with a defined purpose. Button shape and color communicate consequence. The 4px radius is used consistently across all button types.
Primary
Main page CTA. One per view.
Use for the single most important action on a page or modal. Never more than one primary button per view.
#2A6FDB#578bfawhite4px44–56px16px / 600Black
High-contrast action, often on dark backgrounds.
Used when the primary action is destructive-ish or for high-contrast environments. Hover darkens slightly.
#0a0b0dwhite4px44–56pxSecondary
Alternative or supporting action.
Appears alongside a primary button. Never turns blue on hover — only the surface darkens slightly.
#eef0f3#0a0b0d1px rgba(10,11,13,0.10)4px40–48pxBlue Bordered
Secondary product action with blue emphasis.
For secondary actions that benefit from blue emphasis without being a full primary button. Not the page CTA.
transparent / white#2A6FDB1px solid #2A6FDB4px40–48pxOperational
Compact action for toolbars, filters, tables.
Dense product UI: toolbars, inline filters, table actions, workflow controls. Not for page-level CTAs.
#eef0f3#0a0b0d4px32–36px13–14px / 500Destructive
Irreversible actions only.
Delete, revoke, or other irreversible actions. Always paired with a confirmation step. Never uses the theme accent color.
#dc2626white4px36–44pxNever inherit theme accentButton grammar
- Primary (blue filled) — creation, publish, run, or primary commit action
- Secondary / Neutral — cancel, back, or low-emphasis alternatives
- Blue Bordered — secondary product actions that benefit from blue association
- Operational — filters, status, compact utilities in dense product surfaces
- Destructive (red) — delete, revoke; always requires confirmation
- Pills (9999px radius) are chips, badges, and segmented controls — never page CTAs