Separator
Separador — uma linha fina entre grupos de conteúdo ou de botões. Use quando só o espaço não deixa os grupos claros.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo que você carregar define o visual.
import { Separator } from "@camaleo/react";Anatomia
Um <div> com role="separator": 1px de altura na horizontal e 1px de largura na vertical. Ele tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Entre blocos empilhados
A linha ocupa toda a largura do elemento pai. Dê o espaço com o gap do pai, para ficar igual em cima e embaixo.
Entre itens numa linha
Com orientation="vertical", a linha pega a altura da fileira. Use para informações curtas lado a lado, como número de arquivos e tamanho.
Entre grupos de botões
Separe ações de tipos diferentes, como responder e excluir. Para uma barra de ferramentas de verdade, com setas do teclado, use o Toolbar e o separador dele.
Com um texto, como "ou"
Coloque a palavra entre dois separadores com aria-hidden. O leitor de tela lê "ou" uma vez só, em vez de "separador, ou, separador".
Como a Vila Nova Design cortou pela metade os erros nas faturas
Só enfeite
Esta linha curta de destaque não divide nada, então recebe aria-hidden e o leitor de tela pula. Guarde o papel de separador para linhas que dividem conteúdo de verdade.
Mudando com o layout
Clique em Lado a lado. Quando os blocos passam para uma fileira, mude a orientação também, para a linha e o aria-orientation acompanharem.
Em contexto
Separadores dividem menus, listas e painéis em grupos fáceis de percorrer. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Boas práticas
Um separador diz "aqui começa outra coisa". Use onde o assunto muda.
Use margem ou gap para o espaço. Linhas a mais parecem erro, e o leitor de tela anuncia cada uma.
Coloque direto numa fileira flex. Ela estica junto com os itens, sem você definir altura.
Alguns leitores de tela falam "barra vertical" entre os itens. Use um separador vertical no lugar.
Props
Separator também aceita os atributos de um <div>, como aria-hidden e style.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio separador.
Atributos
Tokens que ele lê
Cor
Acessibilidade
- Ele renderiza role="separator" com aria-orientation, então o leitor de tela pode anunciar a quebra entre os grupos.
- Passe aria-hidden quando a linha for só enfeite, ou quando uma palavra como "ou" já diz o que ela significa.
- A linha é uma dica, não o único sinal. Os grupos também precisam fazer sentido pelos títulos ou rótulos.
- Dentro de Menu, Select ou Toolbar, use a parte de separador do próprio componente: ela tem o papel certo para aquele widget.