Composant · Structure

Divider

Stable

Séparateur horizontal ou vertical, plein ou pointillé, avec libellé centré optionnel sur l'orientation horizontale.

Exemples

Avec libellé

Connexion par e-mail

Connexion par SSO

Voir le code (Svelte)

<Stack gap={2}>
  <span class="fp-card-text">Connexion par e-mail</span>
  <Divider label="ou" />
  <span class="fp-card-text">Connexion par SSO</span>
</Stack>

variant="dashed"

Avant

Après

Voir le code (Svelte)

<Stack gap={2}>
  <span class="fp-card-text">Avant</span>
  <Divider variant="dashed" spacing={2} />
  <span class="fp-card-text">Après</span>
</Stack>

API

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`variant`	`"solid" \| "dashed"`	`"solid"`
`spacing`	`number` (pas 0–12)	–
`label`	`string`	horizontal seulement

Rend role="separator" avec aria-orientation. Le libellé n'est rendu qu'à l'horizontale.

Tokens utilisés

--st-semantic-border-subtle
--st-spacing-1 … --st-spacing-12