Composants

dialog

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

17 sur 17

1527Command paletteSuperpositionsUne superposition de recherche ouverte par un bouton ou Ctrl K qui filtre les commandes groupées, déplace une surbrillance avec les touches fléchées, exécute celle sélectionnée sur Entrée et rapporte le résultat.

1540Sheet drawerSuperpositionsUn panneau coulissant qui surgit d'un bord sur un fond sombre, maintient le focus à l'intérieur et se ferme sur Échap, sur le bouton de fermeture ou en tirant sur son en-tête.

1919Banner header dialogSuperpositionsUne fenêtre modale avec une bande de bannière colorée sur son bord supérieur, posée sur une copie grisée et entièrement inerte de la page située derrière elle.

1923Bounce warning dialogSuperpositionsUne boîte de dialogue de confirmation apparaît avec un dépassement élastique et un badge d'icône rebondissant, exigeant une réponse avant que la page ci-dessous ne redevienne utilisable.

1943Consequence confirm dialogSuperpositionsUne boîte de dialogue de confirmation qui s'incline depuis un bord choisi et bloque la page jusqu'à ce que le visiteur annule ou continue explicitement.

1948Custom shell lightboxSuperpositionsUne grille de galerie qui ouvre une visionneuse à fond perdu sans bordure, montrant comment un moteur d'ouverture, de fermeture et de mise au point peut porter une coque entièrement personnalisée.

2041Slide up panel dialogSuperpositionsUn dialogue centré qui se met en place sur un canevas grisé, pour tout contenu nécessitant un moment de pleine attention.

2073Typed confirm dialogSuperpositionsUne boîte de dialogue d'action destructrice dont le bouton de confirmation ne se déverrouille que lorsque quelqu'un tape une phrase exactement correspondante, protégeant ainsi contre les clics accidentels.

2119Centered modal frameSuperpositionsUn modal centré uni qui s'estompe et s'agrandit sur un fond grisé, avec un en-tête, un corps et un pied de page, pour les formulaires et les confirmations de tous les jours.

2156Focus-Trapped Modal KitSuperpositionsUne base modale simple dont l'intérêt réside dans le comportement discipliné du clavier : elle capte la mise au point à l'ouverture et la restitue précisément à la fermeture, enveloppée dans une entrée inclinable.

2204Perspective reveal dialogSuperpositionsUne boîte de dialogue à usage général dont le panneau s'incline à partir d'un bord choisi en 3D, puis s'aplatit pour afficher du contenu arbitraire sur une page grisée.

2253Tilt-in content frameSuperpositionsUn panneau d'information qui s'incline depuis un bord, se ferme librement lors d'un clic extérieur ou d'un échappement, et s'agrandit en douceur à mesure qu'une deuxième section de contenu est révélée.

2306Blocking alert dialogSuperpositionsUn dialogue centré qui exige un choix explicite avant de se fermer, utilisé pour des actions irréversibles que le visiteur ne doit pas rejeter par accident.

2324Confirm action modalSuperpositionsUne boîte de dialogue de confirmation centrée qui s'ouvre sur un fond sombre, demandant au visiteur de confirmer ou d'annuler une action destructrice.

2335Dismissible DialogSuperpositionsUne boîte de dialogue centrée à usage général qui s'ouvre sur un arrière-plan flou et peut être fermée avec désinvolture par son bouton de fermeture, l'arrière-plan ou Échap.

2419Scrollable modal dialogSuperpositionsUn modal à usage général avec un en-tête, un corps qui défile indépendamment une fois que son contenu déborde et un pied de page, fermable par son propre bouton de fermeture, un clic extérieur ou Échap.

2509Dialog bevel buttonBoutonsUn petit bouton système gris construit à partir de deux biseaux durs imbriqués et d'une marque de mise au point intérieure en pointillés, dont les lignes de biseau s'échangent lors de la pression pour qu'elles se lisent comme enfoncées.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Banner header dialog
Une fenêtre modale avec une bande de bannière colorée sur son bord supérieur, posée sur une copie grisée et entièrement inerte de la page située derrière elle.
Blocking alert dialog
Un dialogue centré qui exige un choix explicite avant de se fermer, utilisé pour des actions irréversibles que le visiteur ne doit pas rejeter par accident.
Bounce warning dialog
Une boîte de dialogue de confirmation apparaît avec un dépassement élastique et un badge d'icône rebondissant, exigeant une réponse avant que la page ci-dessous ne redevienne utilisable.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)