Divider

Trait de séparation horizontal ou vertical, avec un texte optionnel au milieu (« ou », une date).

Exemples d'utilisation

Horizontal et vertical

Au-dessus

En dessous

ProfilParamètresDéconnexion

<SuDivider />
<SuDivider orientation="vertical" spacing="sm" />

Avec texte

<SuDivider label="ou" />
<SuDivider label="Aujourd'hui" label-align="start" />
<SuDivider label="Fin de la liste" variant="dashed" label-align="end" />

API

Props

Prop	Type	Défaut	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Orientation
variant	'solid' | 'dashed'	'solid'	Style du trait
label	string	-	Texte au milieu (ou slot par défaut), horizontal seulement
labelAlign	'start' | 'center' | 'end'	'center'	Position du texte
spacing	'none' | 'sm' | 'md' | 'lg'	'md'	Espace autour du trait
decorative	boolean	false	Trait purement visuel, masqué aux lecteurs d'écran

Accessibilité

• Sans texte : role="separator", avec aria-orientation="vertical" en vertical.
• Avec texte : le texte est lu normalement, les traits sont décoratifs.
• decorative : aria-hidden="true", pour un trait qui ne sépare pas de vraies sections (ex. dans une barre d'outils).