1.0 Design System

Buttons

Elementos interativos que disparam ações. Quatro variantes cobrem todos os padrões de interação, de CTAs primários a confirmações destrutivas.

6 Sections · V1.0 · 2026
01

Papéis em Produção

Cada variante de botão tem um papel semântico específico na hierarquia da interface.

SiteCta

Primary CTA

Ação principal

Quando usar: Uma por viewport. A ação mais importante na tela — cadastrar, comprar, começar.

Button

Secondary

Ação de suporte

Quando usar: Junto a um CTA primário ou como ações secundárias independentes — saiba mais, ver detalhes.

Button variant="ghost"

Ghost

Terciário / navegação

Quando usar: Ações de baixa ênfase, breadcrumbs, botões cancelar, links de navegação estilo texto.

Button variant="destructive"

Destructive

Ação perigosa

Quando usar: Excluir, remover, revogar — qualquer operação irreversível ou de alto risco que requer aviso visual.

02

Variantes

As quatro variantes principais de botão, renderizadas com estilos de produção.

bg-brand-gradient
border-brand-primary
text-only
bg-error
03

Tamanhos

Três níveis de tamanho para diferentes contextos de densidade.

h-8 px-3 text-sm
h-10 px-4
h-12 px-6 text-lg
04

Estados

Feedback visual para cada estado de interação.

Default
Hover (lighter)
Active (darker)
opacity-50
Spinner de carregamento
05

Botões com Ícone

Botões aprimorados com ícones para melhor escaneabilidade.

Ícone à esquerda
Ícone à direita
Icon-only (square)
Icon-only secondary
Icon-only ghost
06

Combinações

Pareamentos comuns de CTA usados em layouts de produção.

Primary + Ghost

Primary + Secondary

Destructive + Ghost

Full Width Stack