Button
Botões disparam ações imediatas e conduzem pessoas pelos fluxos principais do Proto-Typed.
Quando usar
- Destacar a ação mais importante da tela ou do card.
- Guiar para telas subsequentes, modais ou drawers com contexto claro.
- Confirmar envios e salvar formulários sem ambiguidade.
- Oferecer caminhos de retorno com variantes mais leves (
@ghost,@link).
Exemplo básico
Ação principal em tela de tarefas
Por quê: apresenta CTA único alinhado ao objetivo da tela.
Variantes
Variante primária para CTA principal
Quando usar: priorize a ação que move o fluxo adiante. Por quê: destaca o comando principal com contraste máximo.
Variante secundária de apoio
Quando usar: ofereça opção complementar sem competir com o CTA principal. Por quê: mantém a hierarquia visual ao apresentar caminhos alternativos.
Variante destrutiva para ações críticas
Quando usar: sinalize riscos e peça confirmação antes de executar. Por quê: associa o estilo destrutivo a ações de alto impacto e reduz erros.
Composição (usando com outros)
- Card + Button — encapsula contexto e mantém CTA visível.
- Row-end + Button — alinha múltiplas ações respeitando a hierarquia.
- Modal + Button — confirma decisões sensíveis antes de concluir tarefas.
Card com botões alinhados
Por quê: combina CTA principal e opção de saída dentro do mesmo bloco.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
variante | enum (@primary, @secondary, @outline, @ghost, @destructive, @link, @success, @warning) | @primary | Define hierarquia visual da ação. | Não |
tamanho | enum (-xs, -sm, -md, -lg) | -md | Ajusta altura e espaçamento do botão. | Não |
label | string | — | Texto visível do botão; pode incluir ícone. | Sim |
ícone | token i- | — | Ícone opcional exibido antes do label. | Não |
destino | slug/rota | — | Tela, modal, drawer, ação (-1, close, alert). | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Link usado como ação
✅ Correto — Botão com ação
Por quê: @ executa ações no fluxo; # serve apenas para navegação declarativa.
❌ Errado — Exclusão sem destaque
✅ Correto — Exclusão destacada
Por quê: a variante destrutiva comunica o risco e reduz cliques acidentais.
❌ Errado — Label pouco claro
✅ Correto — Label orientado a ação
Por quê: labels específicos ajudam a decisão rápida e evitam dúvidas.
Referências cruzadas
Relacionados
Link: navegação sem executar lógica de negócio.Row: organiza botões lado a lado com alinhamentos.Modal: confirma decisões sensíveis com mensagens adicionais.Navigator: estrutura caminhos alternativos por abas ou menus.
Composições recomendadas
- Button + Row-end → destaca CTA principal com ações de suporte.
- Button + Modal → envolve confirmações antes de alterações permanentes.
- Button + Navigator → conecta telas relacionadas em fluxos guiados.
Button com modal de confirmação
Por quê: combina CTA crítico com confirmação explícita para evitar erros.