Boîtes de dialogue

Une boîte de dialogue est une fenêtre modale qui apparaît au premier plan d'une application pour afficher des informations sur une tâche nécessitant une réponse immédiate de l'utilisateur.

Une boîte de dialogue peut être une alerte, nécessitant une interaction de l'utilisateur. Il peut également s'agir d'une boîte de dialogue de sélection ou de confirmation, exigeant de l'utilisateur qu'il fasse ou confirme un choix. La boîte de dialogue conserve le focus jusqu'à ce qu'elle soit fermée ou que l'action requise soit effectuée. Les boîtes de dialogue étant intrusives, leur utilisation doit être parcimonieuse.

Les boîtes de dialogue sont liées aux notifications (toutes deux font partie de la famille de composants Dialog), mais elles diffèrent par leur objectif et leur priorité, comme le montre le tableau.

Composant But Priorité
Toasts Affiche un message informatif. Ne nécessite aucune interaction de l'utilisateur. Disparaît après 8 secondes. Faible
Dialogue Affiche des informations et des options de tâches nécessitant une interaction de l'utilisateur. La boîte de dialogue conserve le focus jusqu'à ce que l'utilisateur réponde. Haut

Anatomie

Les boîtes de dialogue contiennent du texte informatif et des éléments d'interface utilisateur qui nécessitent une réponse de l'utilisateur.

1. Arrière-plan du dialogue
2. En-tête de la carte
3. Domaine de contenu
4. Zone d'action des cartes

Spécifications

icône de bulle
Composant Boutons
Spécifications, directives de style et plus encore
icône de bulle
composant d'éléments de liste
Spécifications, directives de style et plus encore

Dialogue sans titre

Dialogue avec titre

Boîte de dialogue avec titre centré

boîte de dialogue défilable

Personnalisation

Affirmez votre marque en personnalisant les aspects suivants des dialogues :

  • Polices de caractères
  • Style des boutons actifs, inactifs et désactivés
  • Dimensions et emplacement des boutons

Exemples

Dialogue avec titre - jour
Dialogue intitulé - nuit
Boîte de dialogue défilante - jour
Dialogue défilant - nuit
Dialogue en action