Separator

O Separator desenha uma linha de um pixel entre itens de uma lista, seções de um cartão ou ações lado a lado. Ele tem papel separator e, por padrão, é só estrutura: não leva texto. Para agrupar com título, use um cabeçalho de seção, não um separador com rótulo.

import { Separator } from "@rastreio-x/ui";

Padrão

Na horizontal, entre dois blocos. Controle o respiro com margem (my-4) em quem o usa.

Vertical

orientation="vertical" separa itens em linha. O contêiner precisa de altura definida (h-5) para a linha aparecer.

Variantes

default, secondary e tertiary baixam a intensidade da linha. Use a mais forte entre seções e as mais suaves dentro de uma lista.

Entre itens de lista

Renderize o separador só entre itens (index > 0), nunca antes do primeiro nem depois do último, como as listas de Pedidos do Admin.

Seções de um cartão

Seções de um cartão ou de um painel lateral separadas por linha, como no painel da tentativa de uma Fonte.

Anatomia

O Separator é um elemento único (<hr> na horizontal, com role="separator" e aria-orientation quando vertical). Não tem partes.

Propriedades

Animações

O Separator não anima. É uma linha estática; não há transição, nem movimento reduzido a tratar.

Acessibilidade

• Exposto como separator, é ignorado por quem só lê o conteúdo e usado por quem navega por estrutura.
• Linha só estrutural: não carrega significado. Se a divisão importa, nomeie a seção com um título.
• Na vertical, o aria-orientation é preenchido pelo componente.
• O contraste da linha é baixo de propósito: ela ajuda a ver a estrutura, mas nada depende só dela.

Boas práticas

• Em listas, prefira ItemCardGroup ou DataGrid, que já separam as linhas.
• Não use separador para criar espaço; use gap ou margem.
• Mais de dois separadores por tela costumam ser sinal de hierarquia fraca.

Relacionados

• Card o contêiner que muitas vezes agrupa seções separadas.
• DataGrid tabelas que já separam as linhas.
• Accordion seções recolhíveis com divisores próprios.