Séparateur

Un séparateur sépare des groupes de contenu. Il rend un élément role="separator" plutôt qu’un <hr>, parce qu’un libellé se loge à l’intérieur et que <hr> n’accepte aucun enfant.

Séparateur de base

Tout ce qui est au-dessus.

Tout ce qui est en dessous.

stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Tout ce qui est au-dessus.'),
  divider(),
  text({ tone: 'muted' }, 'Tout ce qui est en dessous.'),
)

Avec un libellé

Les enfants deviennent un libellé centré dans le filet.

stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Continuer avec GitHub'),
  divider('ou'),
  button({ block: true }, 'Continuer par e-mail'),
)

Espacement

spacing règle la marge au-dessus et en dessous, sur la même échelle que tout le reste.

Serré

Par défaut

Aéré

Fin

stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Serré'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Par défaut'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Aéré'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'Fin'),
)

Vertical

Un séparateur vertical a besoin d’un parent qui lui donne une hauteur — une rangée flex dont les éléments s’étirent, ce que stack() fait par défaut.

4,1 ko

12 pages

0 îlot

stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4,1 ko'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 pages'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 îlot'),
)

Props

Prop	Type	Défaut	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Dans quel sens court le filet.
`spacing`	`Space`	`'md'`	Marge de part et d’autre du filet.