Séparateurs et espaceurs

divider et spacer sont les seuls composants sans contenu propre. Ils existent pour séparer ce qui les entoure — l'un trace un trait, l'autre réserve de l'espace. Tous deux acceptent props et children, et rien d'autre : pas de content, pas de dataSource, pas de responsive, pas de visibility, pas de i18n.

components:
  - { type: text, tag: h2, content: 'Personal details' }
  - { type: spacer, props: { size: lg } }
  - { type: divider, props: { style: dashed, label: 'or' } }
  - { type: spacer, props: { size: lg } }
  - { type: text, tag: h2, content: 'Company details' }

divider

Un filet entre deux sections, préstylé avec la teinte de bordure du thème.

Propriété	Description
props.style	Style du trait : solid (défaut), dashed ou dotted.
props.label	Texte inséré au milieu du filet.
props.className	Classes Tailwind, ajoutées après le préstyle afin de l'emporter dans la cascade.

style est appliqué comme un border-style inline plutôt que comme une classe : il échappe donc à la cascade de jetons. Toute valeur autre que dashed ou dotted retombe sur solid — une faute de frappe produit un filet ordinaire, pas une erreur.

Séparateurs libellés

Fournir label change le balisage. Au lieu d'un simple <hr>, le séparateur devient un conteneur flex portant role="separator" et un aria-label reprenant le libellé, contenant deux filets encadrant le texte :

- { type: divider, props: { label: 'or continue with', style: solid } }

Le libellé s'affiche dans la teinte de premier plan atténuée, si bien qu'un séparateur libellé se lit comme un ornement passif et non comme un titre. Le nom accessible provenant de aria-label, les technologies d'assistance annoncent le séparateur une seule fois — elles ne relisent pas le texte visible.

spacer

De l'espace vertical, dimensionné par préréglage. Rend un élément aria-hidden : il ajoute donc du rythme sans rien ajouter à l'arbre d'accessibilité.

props.size	Hauteur	Usage typique
sm	0.5rem	Entre des lignes étroitement liées.
md	1.5rem	La valeur par défaut — entre blocs frères.
lg	3rem	Entre sous-sections.
xl	5rem	Entre grandes sections de page.

Une size non reconnue retombe sur md. Un props.className que vous fournissez est ajouté après la classe de hauteur : className: 'h-40' écrase donc entièrement le préréglage.

Pages connexes

• Composants de mise en page — les conteneurs qu'ils séparent.
• Le modèle de composants — pourquoi ces deux-là acceptent si peu de modules.
• Composants de contenu — le texte qu'ils séparent.
• Thème — les teintes de bordure et atténuée employées par le séparateur.