Ravox KitSobreposição
Balão
Conteúdo interativo preso a um botão, sem travar a página: filtros rápidos, compartilhar, editar um valor no lugar. Abre na camada de cima, vira de lado quando não cabe, leva o foco para dentro e devolve no Esc.
Ajustes
Lado
Alinhamento
Exemplos
Editar no lugar e fechar ao salvar
Colunas visíveis, alinhado ao fim
Ajuda ao lado de um campo, com seta
Taxa de conversão
Instalação
O shadcn cria components/ui/balao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/balao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| lado | "cima" | "baixo" | "esquerda" | "direita" | "baixo" | <BalaoConteudo>: de que lado do gatilho abre. Vira para o oposto quando falta espaço; de lado no celular, cai para baixo. |
| alinhamento | "inicio" | "centro" | "fim" | "centro" | Alinhamento com o gatilho no outro eixo. Desliza para dentro da tela se passar da borda. |
| seta | boolean | false | Pontinha apontando para o meio do gatilho. |
| distancia | number | 8 | Espaço entre o gatilho e o balão, em px. |
| classeMiolo | string | — | Classes da parte de dentro (padding e rolagem). className vai na caixa. |
| aberto / padrao / aoMudar | boolean / boolean / (aberto) => void | — | <Balao>: controlado ou não. |
| asChild | boolean | false | <BalaoGatilho>: usa o seu próprio elemento como gatilho. |
| Peças | BalaoGatilho · BalaoConteudo · BalaoTitulo · BalaoFechar | — | O título vira o nome acessível (sem ele, passe aria-label). BalaoFechar e useBalao().fechar() devolvem o foco ao gatilho. |