Skip to main content
View as Markdown

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.

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

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.)

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 ; 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