Separator

Separator divide conteúdos adjacentes sem adicionar um novo container. Escolha-o para uma fronteira real em um fluxo de leitura ou toolbar; use apenas espaçamento quando não houver relação a comunicar.

Exemplos

Uma pausa horizontal no conteúdo

O padrão é uma regra horizontal nativa. Use-a onde o conteúdo muda de tema ou seção, não para decorar cada espaço entre elementos próximos.

Uma alternativa rotulada

label cria um separador horizontal com texto no centro, útil para um caminho alternativo como outro método de login.

or continue with

Um divisor vertical de toolbar

Defina orientation="vertical" para um divisor compacto entre seções da toolbar. Dê-lhe um nome acessível apenas quando a própria separação comunicar algo útil.

Quando usar

Use Separator para comunicar uma fronteira entre grupos relacionados de conteúdo ou controles.

Prefira outro componente quando:

Só é necessário espaço em branco — use Stack, Grid ou o gap do componente pai em vez de uma linha que sugere uma divisão.
O conteúdo precisa de uma seção nomeada e navegável — use um heading e sectioning semântico em vez de um separador.
A interface é um conjunto de visualizações selecionáveis — use Tabs em vez de linhas que não oferecem um controle.

Acessibilidade

A forma horizontal padrão é um <hr>, que carrega a semântica nativa de separador horizontal.
orientation="vertical" renderiza um span com role="separator" e aria-orientation="vertical".
Um label renderiza uma div com role="separator" e é sempre horizontal, independentemente de orientation.
O componente não decide se um divisor é decorativo. Para uma linha apenas visual, passe aria-hidden="true"; caso contrário, deixe o separador semântico emitido disponível para tecnologias assistivas.

API e código

Nome	Tipo	Obrigatória	Descrição
`orientation`	`'horizontal' \| 'vertical'`	—	Separator direction. Default: `"horizontal"`.
`label`	`ReactNode`	—	Centered label, such as `"or"`. Always renders a horizontal separator.

Use o elemento que corresponde ao significado do separador e aplique a classe Lyra correspondente:

html

<hr class="lyra-separator" />

<span
  class="lyra-separator lyra-separator--vertical"
  role="separator"
  aria-orientation="vertical"
></span>

<div class="lyra-separator--label" role="separator">or continue with</div>

<lyra:separator> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`orientation`	`'horizontal'`	—	`vertical`

blade

<lyra:separator orientation="horizontal">
    <x-slot:label>Danger zone</x-slot:label>
</lyra:separator>