Componentes
Button
betaDispara uma ação. É o único elemento que o usuário aperta esperando que algo aconteça.
Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/button
Orientação
O elemento que dispara uma ação. É o único controle que o usuário aperta esperando que algo aconteça — tudo que só leva a outro lugar é link.
Quando usar
- A interação executa alguma coisa: salvar, enviar, abrir uma camada, confirmar.
- Existe uma ação principal na tela e ela precisa ficar evidente — uma primária por tela.
- A ação não tem volta e precisa de peso visual:
destructiveexiste para isso e só para isso.
Quando não usar
- Para navegar. Use
buttonVariantsnuma âncora nativa: mesma aparência, semântica honesta, e o menu do navegador continua oferecendo “abrir em nova aba”. - Para representar estado ligado/desligado. Isso é Toggle, ou Switch quando o efeito é imediato.
- Para empilhar seis ações lado a lado: acima de duas, considere Dropdown Menu ou Button Group.
Playground
<Button>Salvar</Button>Uso
Importe pelo subpath exato. Não existe barrel file — cada componente é um módulo.
Variantes
Uma ação primária por tela. `destructive` é reservada para o que não tem volta.
Tamanhos
Cada tamanho de texto tem um tamanho de ícone correspondente. Use `icon-*` para botões só de ícone.
Com ícone
O espaçamento vem do atributo `data-icon`, não de margem manual. Sem ele o ícone cola no texto.
Só ícone
Sempre defina `aria-label` — não há texto para o leitor de tela.
Carregando
Use o Spinner dentro do botão e desabilite-o. O `data-icon` vale para o spinner também.
Desabilitado
Desabilitado remove o ponteiro e baixa a opacidade, mas não some — o usuário precisa ver que a ação existe.
Link com aparência de botão
Não use `<Button render={<a />}>`. O Button é o primitivo do Base UI e mantém `role="button"`: o leitor de tela anuncia botão, o Enter/Espaço não se comportam como link e o menu de contexto do navegador perde “abrir em nova aba”. Para navegar, use `buttonVariants` numa âncora nativa — é a mesma aparência sem mentir sobre a semântica. O Button continua sendo o certo para ação.
Acessibilidade
O que o componente já garante, e o que continua sendo responsabilidade da tela.
- É o primitivo de botão do Base UI: mantém
role="button", responde a Enter e Espaço e entra na ordem de tabulação sem ajuda. - Botão só de ícone não tem nome acessível. Passe
aria-label— sem ele o leitor de tela anuncia “botão” e nada mais. disabledtira o botão do foco. Se o usuário precisa entender por que não pode agir, o motivo tem que estar visível na tela, não só num tooltip que ele não alcança.
Em contexto de produto
Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.
Na tela de autenticação, o botão primário é o único caminho para entrar, e o acesso institucional aparece como ação secundária logo abaixo do separador.
Ver o bloco de autenticaçãoComponentes relacionados
Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Button
| Prop | Tipo | Padrão |
|---|---|---|
| size | "md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null | "md" |
| variant | "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | "default" |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Origem do dado
- Orientação, acessibilidade e relacionados: documentação
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css