# Composants interactifs

Les composants interactifs sont les primitives cliquables et inline : boutons qui déclenchent des actions, liens qui naviguent, alertes et badges qui transmettent un statut. Ils portent les modules partagés `action` et `interactions` (comportement clic/survol/entrée) ainsi que `props`, `visibility` et `responsive`.

```yaml
components:
  - type: button
    label: Save
    action: { type: crud, operation: create, onSuccess: { type: navigate, url: /done } }
  - type: link
    content: Learn more
    props: { href: /docs, target: _blank }
```

## `button`

Un bouton cliquable qui déclenche une `action` et/ou des `interactions`.

| Propriété        | Description                                                                                                                                                                   |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`          | Libellé de texte du bouton.                                                                                                                                                   |
| `content`        | Contenu inline (alternative à `label` ; peut contenir un enfant `icon`).                                                                                                      |
| `action`         | Action à exécuter au clic — `crud`, `auth`, `navigate`, `automation` — avec gestionnaires `onSuccess`/`onError`.                                                              |
| `interactions`   | Animation de clic, navigation, défilement, bascule, soumission de formulaire ou ouverture de fenêtre modale. Voir [Interactivité et scripts](/fr/docs/interactivity-scripts). |
| `props.loading`  | Afficher un spinner de chargement à l'intérieur du bouton.                                                                                                                    |
| `props.confirm`  | Invite de confirmation au clic avant l'exécution de l'action.                                                                                                                 |
| `props.variant`  | Variante de style visuel (p. ex. `primary`, `secondary`, `destructive`).                                                                                                      |
| `props.disabled` | Désactiver le bouton.                                                                                                                                                         |

## `link`

Un élément d'ancre pour la navigation.

| Propriété      | Description                                                               |
| -------------- | ------------------------------------------------------------------------- |
| `content`      | Texte du lien (prend en charge la substitution).                          |
| `props.href`   | URL ou chemin de route.                                                   |
| `props.target` | Cible de l'ancre (p. ex. `_blank` pour un nouvel onglet).                 |
| `props.rel`    | Attribut `rel` de l'ancre (p. ex. `noopener noreferrer`).                 |
| `children`     | Contenu imbriqué optionnel (p. ex. une `image` pour une image cliquable). |

## `alert`

Un bloc d'encart inline. (Aussi documenté dans [Composants de contenu](/fr/docs/content-components#alert).)

| Propriété           | Description                                                                   |
| ------------------- | ----------------------------------------------------------------------------- |
| `content`           | Le message d'alerte.                                                          |
| `props.variant`     | `info`, `warning`, `error`, ou `success` (chacun avec une icône automatique). |
| `props.dismissible` | Rendre un bouton de fermeture qui masque l'alerte.                            |

## `badge`

Une petite puce de statut/libellé.

| Propriété | Description                                                                |
| --------- | -------------------------------------------------------------------------- |
| `content` | Texte du libellé du badge.                                                 |
| `variant` | Mode de rendu (p. ex. `status` pour un point d'indicateur de statut).      |
| `color`   | Jeton de couleur pour le point de statut (`variant: status`).              |
| `label`   | Texte du libellé de statut à côté du point (`variant: status`).            |
| `pulse`   | Activer une animation pulsante sur le point de statut (`variant: status`). |

## `button-group`

Une rangée de boutons connexes. (Aussi documenté dans [Composants de navigation](/fr/docs/navigation-components#button-group) ; combinez avec `dropdown-menu` pour un bouton fractionné.)

| Propriété  | Description                                                        |
| ---------- | ------------------------------------------------------------------ |
| `children` | Les composants `button` groupés (et liste déroulante optionnelle). |
| `props`    | Attributs HTML (p. ex. `className`).                               |

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — actions et gestionnaires de réponse.
- [Interactivité et scripts](/fr/docs/interactivity-scripts) — comportement clic/survol/entrée en profondeur.
- [Contrôles de formulaire](/fr/docs/form-controls) — entrées que les boutons soumettent.
- [Composants de navigation](/fr/docs/navigation-components) — menus et motifs de bouton fractionné.