Componentes
Button
Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.
Exemplos#
Variantes · md 40
Tamanhos · xs 28 · sm 32 · md 40 · lg 48 · ícone
Estados · carregando mantém a largura · desabilitado
Sobre vidro e noite
Ícone à direita indica avanço
Importar#
import { Button, buttonVariants, buttonSizes } from "@hiboupay/react";
import type { ButtonProps, ButtonVariant, ButtonSize } from "@hiboupay/react";Quando usar#
Use quando
- Disparar uma ação na tela atual: salvar, confirmar, abrir diálogo.
- Confirmar ou cancelar dentro de diálogo e gate.
- Ação de ícone em barra densa (size icon / icon-sm) com aria-label.
Não use quando
- Navegar para outra página: use link.
- Alternar entre vistas: use Tabs.
- Filtrar lista: use FilterChip.
Variantes#
primary
Vivid Blue em degradê. Uma por área. A ação que a pessoa veio fazer.
night
Graffiti. Ação forte que não é a principal, ou principal sobre fundo azul.
outline
Papel com anel. Ação alternativa ao lado da primária.
secondary
Violeta suave. Rascunho, experimento.
ghost
Sem fundo. Cancelar, ação terciária.
glass
Sobre vidro ou canvas com aurora.
success
Concluir de forma positiva (liquidar, aprovar).
danger
Destrutiva. Quase sempre abre ConfirmGate.
link
Saída discreta, sem caixa. Voltar, cancelar navegação.
Anatomia#
- 01Contêiner com altura de controle (28 · 32 · 40 · 48)
- 02Ícone opcional à esquerda ou direita (lucide, tamanho automático)
- 03Rótulo com verbo
- 04Spinner sobreposto quando loading (a largura não muda)
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| variant | "primary" | "night" | "secondary" | "outline" | "ghost" | "glass" | "link" | "danger" | "success" | "primary" | Peso visual e intenção. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "md" | xs 28 · sm 32 · md 40 · lg 48. icon é quadrado de 40; icon-sm de 32. |
| loading | boolean | false | Troca o conteúdo por spinner mantendo a largura. Também desabilita e liga aria-busy. |
| type | "button" | "submit" | "reset" | "button" | Padrão button para não submeter formulário por acidente. |
| ...props | ButtonHTMLAttributes | Qualquer atributo nativo de <button>. ref é encaminhado. |
Acessibilidade#
Teclado
Leitor de tela
- —Anunciado como botão com o rótulo.
- —size icon / icon-sm exige aria-label.
- —loading anuncia ocupado (aria-busy).
Boas práticas#
Faça
- Uma primária por área de decisão.
- Rótulo com verbo: "Confirmar e assinar", "Estornar R$ 1.200".
- Mesma altura do input ao lado.
Evite
- Duas primárias lado a lado.
- Botão para navegar.
- Rótulo genérico ("OK", "Clique aqui").
Conteúdo#
- —Verbo no infinitivo ou imperativo curto, até 3 palavras.
- —Inclua o objeto quando houver dinheiro: "Pagar R$ 90".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Diálogo
ConfirmGate
Gate para ações irreversíveis: dinheiro, permissão, exclusão, execução de agente. Pode exigir motivo e palavra digitada.
Diálogo
Modal
Papel sobre scrim de Graffiti. No celular vira folha que sobe; no desktop pousa e a borda de luz acende depois. O rodapé é a faixa da decisão; o corpo rola.
Estado
Spinner
Arco curto em currentColor, para dentro de um botão ou ao lado de um texto.
Diálogo
DropdownMenu
Menu de vidro no desktop; folha de papel no celular. Item 34 (40 no toque), perigo em tinta rosa. Nunca é navegação e nunca é filtro.