Ravox KitBásicos
Button
O botão de todo dia: padrão, secundário, contorno, fantasma, destrutivo e link, mais o mosaico e a tecla da casa. Com ícone, só ícone, carregando e como link.
Ajustes
Ligar e desligar
Exemplos
Variantes
Assinatura da casa
Tamanhos
Com ícone
Só ícone
Carregando e desabilitado
Como link
Instalação
O shadcn cria components/ui/botao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/button.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| variante | "padrao" | "secundario" | "contorno" | "fantasma" | "destrutivo" | "link" | "mosaico" | "tecla" | "padrao" | Estilo do botão. Destrutivo para apagar e cancelar; mosaico leva a borda em quatro blocos de cor chapada; tecla tem o degrau de uma tecla e afunda no clique. |
| tamanho | "pequeno" | "medio" | "grande" | "icone" | "icone-pequeno" | "medio" | Altura e respiro. Os de ícone são quadrados: dê um aria-label. |
| carregando | boolean | false | Mostra o giro no lugar do ícone, trava o clique e marca aria-busy. Não esmaece: carregando não é desabilitado. |
| asChild | boolean | false | Passa o visual para o filho (ex.: <Link>), que continua sendo o elemento de verdade. |
| ...props | ComponentProps<"button"> | — | Tudo o que um <button> aceita. |