Ravox KitBásicos
Separador
A linha fina entre grupos, na horizontal ou na vertical, sólida ou tracejada. Com texto dentro, o rótulo fica no meio ("ou", "Hoje") ou encostado no começo da linha.
ou com e-mail
Ajustes
Orientação
Rótulo em
Exemplos
Barra de ferramentas
Dias numa conversa
O pedido 4821 já saiu?
Hoje
Saiu às 9h, chega amanhã.
Título de seção
Conta
thiago@ravoxlabs.com
Zona de perigo
Metadados em linha
v2.4.0Atualizado há 3 diasMIT
Instalação
O shadcn cria components/ui/separador.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/separador.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| orientacao | "horizontal" | "vertical" | "horizontal" | Na vertical, estica na altura do pai (use num flex). |
| children | ReactNode | — | Rótulo no meio da linha. Continua sendo lido por leitores de tela. |
| alinhar | "inicio" | "centro" | "fim" | "centro" | Onde o rótulo fica na linha. |
| tracejado | boolean | false | Linha tracejada. |
| decorativo | boolean | true | Só visual. Com false, vira role="separator" com aria-orientation (um rótulo em texto vira o nome). |
| ...props | ComponentProps<"div"> | — | Tudo o que um <div> aceita. |