Navegar componentes

Divider

MiscExemplo

Separador visual que divide o conteúdo em seções distintas. Use para criar limites claros entre grupos de conteúdo relacionado ou delimitar regiões interativas dentro de um layout.

Importação

import {Divider} from '@pharos-ds/core/Divider';

Exemplos

Área interativa

orientation

variant

isFullBleed

Acima

Abaixo

Código

import {Divider} from '@pharos-ds/core/Divider';

<Divider
  orientation="horizontal"
  variant="subtle"
  isFullBleed={false}
 />

Boas práticas

Faça: Use dividers sutis entre seções de conteúdo relacionado e dividers strong para limites de alto contraste.
Faça: Adicione um label ao divider quando as seções precisarem de um cabeçalho de categoria visível.
Evite: Use dividers em excesso; prefira espaçamento e layout para separar conteúdo quando possível.

Props

Prop	Tipo	Padrão	Descrição
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientação do divider.
`label`	`ReactNode`	—	Rótulo opcional centralizado no divider.
`variant`	`'subtle' \| 'strong'`	`'subtle'`	Peso visual da linha do divider.
`isFullBleed`	`boolean`	`false`	Estende o divider até as bordas do contêiner com margens negativas.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para personalização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/Divider