Composant · Overlay

Modal

Stable

Dialogue modal recentré qui interrompt le flux pour une tâche courte et focalisée : confirmation, formulaire bref ou décision bloquante. Il piège le focus et assombrit l'arrière-plan jusqu'à la fermeture.

Quand l'utiliser

Demander une confirmation avant une action conséquente ou destructive.
Présenter une tâche brève qui doit être terminée ou annulée avant de continuer.
Concentrer l'attention sur une décision unique, sans distraction de l'arrière-plan.

Quand ne pas l'utiliser

Pour un workflow long ou multi-étapes : préférez Drawer ou une page dédiée.
Pour une notification éphémère qui n'attend pas d'action : utilisez Toast.
Pour un détail contextuel non bloquant ancré à un déclencheur : utilisez Popover.

Exemple interactif

Le bouton ouvre un dialogue avec titre, description et corps ; une seconde variante ajoute un pied d'actions aligné à droite. Escape ou le bouton de fermeture le referment. Choisissez l'onglet Svelte, React, Vue ou Angular : la démo est la vraie implémentation interactive du framework sélectionné.

Démo interactive

Anatomie

Fond (.st-modal__backdrop) : calque plein écran assombrissant l'arrière-plan, position fixe.
Dialogue (.st-modal, role="dialog", aria-modal) : surface centrée, max 36 rem de large.
En-tête (.st-modal__header) : titre, description optionnelle et bouton de fermeture.
Corps (.st-modal__body) : contenu défilable fourni via le snippet children.
Pied (.st-modal__footer) : zone d'actions optionnelle, alignée à droite.

Accessibilité

Le dialogue a role="dialog" et aria-modal="true" ; aria-label reprend le titre.
À l'ouverture, le focus se place automatiquement sur le bouton de fermeture.
Le focus est piégé : Tab et Shift+Tab bouclent à l'intérieur du dialogue.
Escape ferme le dialogue ; à la fermeture, le focus retourne sur l'élément déclencheur.

Lignes directrices

À faire

Donner un titre clair décrivant la décision attendue.
Placer l'action de confirmation à droite dans le pied.

À éviter

Empiler plusieurs modals : une seule décision à la fois.
Y loger un long formulaire défilant : préférez une page ou un Drawer.

API

Prop	Type	Défaut	Description
`open`	`boolean`	`false`	Affiche le dialogue et son fond.
`title`	`string`	requis	Titre du dialogue, repris dans aria-label.
`description`	`string`	optionnel	Texte secondaire sous le titre.
`closeLabel`	`string`	`"Close"`	aria-label du bouton de fermeture.
`onclose`	`() => void`	optionnel	Appelé sur Escape ou clic de fermeture.
`children`	`Snippet`	optionnel	Contenu du corps.
`footer`	`Snippet`	optionnel	Zone d'actions en pied.
`class`	`string`	optionnel	Classe(s) sur le dialogue.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <section> dialogue.

Tokens utilisés

--st-component-overlay-backdrop
--st-component-overlay-zIndex
--st-component-overlay-surface
--st-component-overlay-border
--st-component-overlay-radius
--st-component-overlay-shadow