Carregando…Carregando…Carregando…Carregando…Horizontal or vertical divider with label, 3 styles and configurable spacing.
$ npx kikitocn add separator@/lib/utilsimport { Separator } from "@/components/ui/cn/separator/Separator";
export function SeparatorExample() {
return (
<Separator orientation="horizontal" variant="solid" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direção do separador |
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Estilo da linha |
label | ReactNode | undefined | Texto ou elemento centralizado na linha |
labelAlign | 'start' | 'center' | 'end' | 'center' | Posição do label |
spacing | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined | Margem vertical (horizontal) ao redor do separador — sem margem se omitido |
decorative | boolean | true | Quando true, usa role='none' (fora da árvore de acessibilidade); quando false, usa role='separator' |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
solid · dashed · dotted
Section above
Section above
Section above
Section below
With label
Inline vertical separator