componentes / divider

Divider

Separador horizontal ou vertical, com texto opcional no meio.

Como usar

Renderiza `role="separator"` com `aria-orientation`. Leitores de tela o anunciam, então use só quando a separação tem significado; para decoração pura use `decorative`. Um divisor vertical estica até a altura de um pai flex.

preview

Divider.tsx

import { Divider } from "vaiperui";
 
<Divider />
<Divider label="or" variant="dashed" spacing="md" />
<Divider orientation="vertical" customColor="#7c3aed" />

Estilo da linha

preview

solid

dashed

dotted

variant.tsx

<Divider variant="solid" />
<Divider variant="dashed" />
<Divider variant="dotted" />

Com texto

preview

start

center

end

label.tsx

<Divider label="start" labelAlign="start" />
<Divider label="center" />
<Divider label="end" labelAlign="end" />

Cor

preview

soft

strong

customColor

color.tsx

<Divider color="soft" />
<Divider color="strong" />
<Divider customColor="#7c3aed" />

Vertical

preview

vertical

vertical.tsx

<div className="flex h-8 items-center gap-3">
  A <Divider orientation="vertical" /> B
</div>

Props

Prop	Valores	Padrão	Descrição
orientation	horizontal \| vertical	horizontal	Direção da linha
variant	solid \| dashed \| dotted	solid	Estilo da linha
spacing	none \| sm \| md \| lg	none	Margem em volta da linha (8 / 16 / 24px)
color / customColor	default \| strong \| soft / CSS color \| { light, dark }	default	Token de borda do tema, ou sua própria cor (vale mais que `color`)
label / labelAlign	ReactNode / start \| center \| end	none / center	Texto dentro da linha e onde ele fica
decorative	boolean	false	Usa role="presentation" em vez de separator

Acessibilidade

Sem `label` renderiza um `<hr>`; com `label`, um `<div>`. Ambos recebem `role="separator"` e `aria-orientation` igual a `orientation`.
`decorative` troca o papel para `presentation` e remove `aria-orientation`, então tecnologias assistivas o ignoram.
O texto do label continua legível; as linhas ao lado dele são `aria-hidden`.
Não é focável e não tem comportamento de teclado.

Tenha em mente

Use `decorative` quando a linha for só visual, para os leitores de tela não anunciarem um separador entre cada item.
Cor e `variant` são só visuais: não dependa deles para transmitir significado.