Ravox KitBásicos
Grupo de botões
Ações vizinhas coladas numa peça só, na horizontal ou na vertical: Publicar | ▾, − 1 +, prefixo + campo + copiar. Separador para botões sólidos, texto fixo e modo barra de ferramentas com setas do teclado.
Ajustes
Variante
Tamanho
Orientação
Exemplos
Ação principal com mais opções
Quantidade
Barra de ferramentas (setas do teclado)
Com campo e texto fixo
https://
Paginação vertical
Instalação
O shadcn cria components/ui/grupo-botoes.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/grupo-botoes.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| orientacao | "horizontal" | "vertical" | "horizontal" | Direção em que as peças se colam. |
| variante | variante do Botao | — | Padrão de todo <Botao> filho (cada um ainda pode passar o seu). |
| tamanho | tamanho do Botao | — | Padrão de todo <Botao> filho. |
| ferramentas | boolean | false | Vira role="toolbar": uma parada de Tab e setas, Home e End entre os botões. |
| ...props | ComponentProps<"div"> | — | role="group" por padrão: dê um aria-label que diga o que o grupo faz. |
| GrupoBotoesSeparador | componente | — | Fio entre dois botões sólidos. Em contorno, a borda já separa. |
| GrupoBotoesTexto | componente | — | Pedaço de texto fixo: "https://", "R$", "/mês". |