Botões

Variações

Começar agora Ver como funciona Saber mais →

Primário (CTA principal)

<a class="px-8 py-3 rounded-full bg-brand-500 dark:bg-brand-500 text-white font-semibold
          hover:bg-brand-700 dark:hover:bg-brand-600 transition-colors">
  Começar agora
</a>

Uso: Uma por seção. Ação principal da página.

Secundário (outline)

<a class="px-8 py-3 rounded-full border text-sm font-medium transition-colors
          bg-white/0 border-black/10 text-[#0a0a0a] hover:border-black/18
          dark:bg-white/4 dark:border-white/15 dark:text-white dark:hover:border-white/25">
  Ver como funciona
</a>

Uso: Ação secundária, ao lado do botão primário.

Ghost (navegação/links)

<a class="text-brand-400 hover:text-brand-300 font-medium transition-colors">
  Saber mais →
</a>

Uso: Links inline, ações terciárias.

Destrutivo

<button class="px-6 py-2 rounded-lg bg-error/10 border border-error/30 text-error hover:bg-error/20 transition-colors">
  Cancelar conta
</button>

Uso: Ações irreversíveis. Sempre requer confirmação.

Estados

Defaultdefault

Hoverhover

Focusfocus

Carregando…

Disableddisabled

Estado	Visual
Default	Cor base
Hover	Cor escurecida (`brand.700` light / `brand.600` dark)
Focus	`ring-2 ring-brand-500 ring-offset-2 ring-offset-background`
Loading	Spinner + “Carregando…”
Disabled	`opacity-40 cursor-not-allowed`

Tamanhos

Grande Médio Pequeno

Tamanho	Classes	Uso
Grande	`px-8 py-3 text-base`	CTAs principais
Médio	`px-6 py-2.5 text-sm`	Ações secundárias
Pequeno	`px-4 py-2 text-xs`	Dentro de cards, tabelas

Regras

Nunca mais de 1 botão primário por seção
Copy de botão: imperativo, verbo de ação (começar, ver, baixar, falar)
Botões pill (rounded-full) para CTAs de destaque; rounded-md para ações funcionais
Nunca use apenas ícone em botões primários — sempre acompanhe com texto
Dark mode: accent brand.500 (#e7580f), hover brand.600
Light mode: accent brand.600 (#c94208), hover brand.700 — garante contraste WCAG AA