Composants superposés
Tout ce qui flotte au-dessus de la page : dialogues et confirmations, panneaux latéraux et tiroirs à balayer, popovers, hover cards, infobulles, menus déroulants et contextuels, une barre de menus et une palette de commandes ⌘K.
Le focus entre à l’ouverture et revient à la fermeture, ils restent à l’écran jusqu’à 320 pixels de large, et les dialogues deviennent des feuilles du bas à balayer sur téléphone.
- Alert dialogUne boîte de dialogue de confirmation pour les actions destructrices ou importantes, qui attend le travail asynchrone et devient une bottom sheet sur mobile.
- CommandUne liste d’actions recherchable, intégrée ou en palette ⌘K, avec pages, raccourcis et correspondances surlignées.
- Context menuUn menu d’actions au clic droit ou à l’appui long, avec sous-menus, éléments case à cocher et radio, et retour visuel de maintien au toucher.
- DialogUne fenêtre au-dessus de la page pour les formulaires et les tâches ciblées, avec en-tête et pied de page épinglés, imbrication, et une bottom sheet balayable sur mobile.
- DrawerUn panneau qui glisse depuis n’importe quel bord et suit votre doigt, avec des points d’accroche, une poignée fonctionnelle et des drawers imbriqués qui s’empilent.
- Dropdown menuUn menu d’actions et d’options derrière un bouton, avec groupes, sous-menus, éléments case à cocher et radio, et raccourcis.
- Hover cardUne carte d’aperçu qui s’ouvre au survol ou au focus d’un lien, pour un contenu que les personnes voyantes peuvent parcourir du regard.
- MenubarUne barre de menus façon bureau, avec une seule surbrillance qui glisse entre les menus ouverts et un changement instantané quand vous balayez la barre.
- PopoverUn panneau flottant ancré à un déclencheur, qui se redimensionne en douceur avec son contenu et suit la direction du déclencheur.
- SheetUn panneau qui glisse depuis n’importe quel bord, avec fermeture par balayage, verrouillage du défilement et imbrication empilée.
- TooltipUne courte infobulle au survol ou au focus clavier, qui s’ouvre après un bref arrêt, passe instantanément d’un voisin à l’autre et affiche les raccourcis.
Utilisés dans les blocs Pro
Des blocs pour produits d’IA construits avec ces composants.
- API keysLa page des clés API d’un produit IA. Gère un secret affiché une seule fois, la révocation avec annulation et la rotation avec délai de grâce.
- BillingLa page de forfait et d’utilisation d’un produit IA. Gère les crédits épuisés en cours de cycle, les changements de forfait au prorata et les erreurs de carte.
- NotificationsLa section Notifications des réglages d’un produit IA. Gère une grille canal par événement, les heures calmes et la permission du navigateur pour le push.
- SecurityLa section Sécurité des réglages d’un produit IA. Gère les sessions, la double authentification avec codes de récupération et la suppression derrière une confirmation saisie.
- SettingsLa page des réglages d’un produit IA. Gère une barre d’enregistrement qui n’apparaît qu’en cas de changement, les erreurs de champ et les états de chargement.
- TeamLa page d’équipe des réglages d’espace de travail d’un produit IA. Gère les sièges épuisés, les invitations en attente et le transfert de propriété avec confirmation saisie.