Separator

Layout

Linha divisória horizontal ou vertical para separar grupos de conteúdo relacionado.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Separator } from "@trdr/ui/separator"

Uso

import { Separator } from "@trdr/ui/separator"

export function Exemplo() {
  return <Separator />
}

Props

SeparatorPropsestende React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
PropTipoDescrição
decorative?booleanPuramente decorativo por padrao: some da arvore de acessibilidade.

Quando usar

Use o separator para dividir visualmente secoes ou itens que pertencem ao mesmo bloco de conteudo, como grupos num menu, colunas numa barra de acoes ou secoes num formulario. A orientacao vertical serve para separar itens lado a lado (por exemplo, links numa barra), e a horizontal para empilhar blocos.

Quando nao usar

Nao use o separator para simular espacamento: se o que voce quer e so respiro entre elementos, use gap ou padding da escala de espacamento, nao uma linha visivel. Nao use varios separators seguidos para criar uma grade: isso e trabalho de layout (grid ou flex), nao de divisor de conteudo.

Anatomia

Um unico elemento raiz (data-slot="separator"), construido sobre o primitivo Separator do Radix. A cor vem sempre de bg-border; a espessura e de 1px (h-px no horizontal, w-px no vertical).

Acessibilidade

Por padrao o separator e decorative (decorative={true}): ele some da arvore de acessibilidade porque a divisao visual ja e implicita na estrutura do conteudo ao redor. Passe decorative={false} somente quando o separator carrega significado semantico proprio (por exemplo, quando ele e o unico sinal de que duas listas nao relacionadas foram concatenadas); nesse caso o elemento assume role="separator" e comunica a divisao para leitor de tela.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="separator"]
1 tokens usados
bg-border