Button

• Criar, adicionar ou salvar em um formulário: iniciar um objeto novo, somar um item a algo existente ou persistir alterações; costuma ir como primary. Ex.: "Criar produto", "Adicionar variação", "Salvar alterações".
• Editar ou configurar: abrir algo existente em modo de edição ou iniciar um fluxo de configuração. Ex.: "Editar informação", "Configurar pagamentos".
• Confirmar uma ação: executar algo destrutivo e sem volta, ou confirmar a leitura de um aviso somente leitura. Ex.: "Excluir produto", "Entendi".
• Cancelar ou fechar sem executar: voltar ao estado anterior ou fechar um painel informativo sem consequências. Ex.: "Cancelar", "Fechar".
• Mudar o estado de um objeto: ativar ou desativar uma funcionalidade. Ex.: "Ativar", "Desativar".

• Para navegar para outra página ou ver mais detalhe: o Button é para executar ações, não para navegar. Em vez disso, usar Link. Ex.: "Ler mais", "Ver detalhe", "Ir para a lista".
• Para alternar um estado binário ativado/desativado. Em vez disso, usar Toggle.

As partes opcionais não coexistem todas ao mesmo tempo; são mostradas em combinações reais.

1. Label: texto que descreve a ação.
2. Ícone (componente Icon): reforço visual opcional, antes ou depois do label.
3. Badge: número de itens associados (opcional).
4. Spinner: indicador de carregamento (opcional).

Fora de cards, alinhado à direita; largura conforme o conteúdo. No rodapé de um modal, o neutral acompanha o primary (ou o danger) como ação oposta.

As ações usam fullWidth e se empilham verticalmente para garantir uma área de toque ampla; a ação principal fica no topo.

• Navegação por teclado: ao renderizar um <button> nativo, recebe o foco com Tab e é ativado com Enter ou Espaço.
• Foco visível: o Nimbus aplica um anel de foco próprio (:focus-visible); não suprimir o outline ao personalizar estilos.
• Rótulo no label: o conteúdo (children) é obrigatório e deve descrever a ação. Se a ação for apenas um ícone, usar Icon button (que exige um aria-label), não um Button sem texto.
• Botão vs. link: se a ação navega para outra página, usar as="a" com href para renderizar um <a> com a semântica correta; reservar o <button> para ações.
• Estado desabilitado: usar a prop disabled, não simular com cor ou opacidade; o <button disabled> comunica o estado inativo às tecnologias assistivas.
• Não depender da cor: o significado de uma ação danger deve ficar claro pelo texto do label, não apenas pela cor.

O label é uma promessa: descrever exatamente a ação que será executada. Priorizar a precisão sobre a brevidade.

Pontuação: sem ponto final, sem pontos de exclamação e sem dois-pontos.

Pessoa gramatical: infinitivo como norma. O imperativo ("Salve", "Exclua") é uma exceção justificada apenas quando o contexto conversacional o exige; em buttons de interface, o infinitivo é a convenção.

Limite de caracteres recomendado:

Forma verbal:

• Infinitivo para labels padrão → "Salvar", "Excluir", "Criar".
• Infinitivo + objeto quando o verbo sozinho é ambíguo → "Salvar alterações", "Excluir produto".
• Gerúndio apenas como loading state → "Salvando…", "Excluindo…" (nunca como label estático).
• Nunca substantivo sozinho como label de ação (ex.: "Aplicativos" em um botão que executa algo).

Cada aparência tem um tom e características próprias que orientam o copy:

Conforme onde o botão aparece, o label segue uma fórmula:

Instale o componente via terminal.

Propriedades adicionais são repassadas ao elemento <Button>. Consulte a documentação do elemento button para ver a lista de atributos aceitos.

• Link — Para navegar entre páginas com menor destaque visual que o Button.
• Icon button — Para ações representadas apenas por um ícone, sem texto visível.

Button