Divisória

Uma divisória separa grupos de conteúdo. Desenha um elemento com role="separator" em vez de um <hr>, porque a etiqueta vai lá dentro e o <hr> não aceita filhos.

Divisória básica

Tudo o que está acima.

Tudo o que está abaixo.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Tudo o que está acima.'),
  divider(),
  text({ tone: 'muted' }, 'Tudo o que está abaixo.'),
)

Com etiqueta

Os filhos passam a uma etiqueta centrada no traço.

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Continuar com o GitHub'),
  divider('ou'),
  button({ block: true }, 'Continuar com email'),
)

Espaçamento

spacing define a margem acima e abaixo, a partir da mesma escala que tudo o resto usa.

Apertado

Predefinição

Folgado

Fim

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Apertado'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Predefinição'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Folgado'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Fim'),
)

Vertical

Uma divisória vertical precisa de um pai que lhe dê altura — uma linha flex cujos itens se esticam, que é o que o stack() faz por predefinição.

4,1 kB

12 páginas

0 ilhas

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4,1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 páginas'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 ilhas'),
)

Props

Prop	Tipo	Predefinição	Descrição
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Em que direção corre o traço.
`spacing`	`Space`	`'md'`	Margem de cada lado do traço.