# Buttons — Unless design system

Components

# Buttons
  [Variants](/en/design/components/buttons/)[States](/en/design/components/buttons/states/)[Usage](/en/design/components/buttons/usage/)
## When to use which variant

The placement rules behind primary / secondary / ghost. One primary per surface, never compete CTAs side-by-side - these constraints are what keep the call-to-action voice singular across the site.

- One primary per surface - never two competing CTAs in the same band.
- Ghost / link CTAs carry the secondary action ("Learn more →").
- Hero + CTA bands inherit the matching primary recipe automatically.
       [Buttons · States](/en/design/components/buttons/states/)     [Cards · Variants](/en/design/components/cards/)