Separador

Un separador separa grupos de contenido. Dibuja un elemento con role="separator" en vez de un <hr>, porque la etiqueta va dentro y <hr> no admite hijos.

Separador básico

Todo lo de arriba.

Todo lo de abajo.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Todo lo de arriba.'),
  divider(),
  text({ tone: 'muted' }, 'Todo lo de abajo.'),
)

Con etiqueta

Los hijos pasan a ser una etiqueta centrada en la línea.

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

Espaciado

spacing fija el margen de arriba y de abajo, desde la misma escala que usa todo lo demás.

Justo

Por defecto

Holgado

Fin

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Justo'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Por defecto'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Holgado'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Fin'),
)

Vertical

Un separador vertical necesita un padre que le dé altura: una fila flex cuyos elementos se estiren, que es lo que hace stack() por defecto.

4,1 kB

12 páginas

0 islas

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 islas'),
)

Props

Prop	Tipo	Por defecto	Descripción
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Hacia dónde corre la línea.
`spacing`	`Space`	`'md'`	Margen a cada lado de la línea.