# 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`.

```yaml
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 :

```yaml
- { 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.

:::callout
**Préférez le remplissage sur le parent quand c'est possible.** Un `spacer` est l'outil adéquat quand l'espace appartient à l'intervalle entre deux frères et qu'aucun des deux ne le possède — une rupture de section dans un formulaire, une respiration sur une page d'accueil. Quand un bloc possède l'espace, mettez-le dans son `className` : il y a moins de balisage et cela survit à un réordonnancement.
:::

## Pages connexes

- [Composants de mise en page](/fr/docs/layout-components) — les conteneurs qu'ils séparent.
- [Le modèle de composants](/fr/docs/components-overview) — pourquoi ces deux-là acceptent si peu de modules.
- [Composants de contenu](/fr/docs/content-components) — le texte qu'ils séparent.
- [Thème](/fr/docs/theme) — les teintes de bordure et atténuée employées par le séparateur.