Composants

confirm

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

24 sur 24

1553Check iconIcônesUne coche qui se dessine du bras court vers le bras long, puis s'installe.

Hold to delete

1636Hold to deleteBoutonsUn bouton destructeur qui ne se déclenche qu'une fois que le pointeur est maintenu enfoncé suffisamment longtemps pour qu'une barre de remplissage le traverse et rembobine dès que vous le relâchez.

Hold ring confirm

1707Hold ring confirmBoutonsUn bouton rond entouré d'un trait qui se dessine pendant que vous maintenez le doigt enfoncé, introduisant simultanément une valeur de progression dans l'anneau, l'échelle du bouton et la couleur de l'étiquette.

Share toggle chip

2035Share toggle chipBoutonsUne puce encastrée qui passe d'un état d'invitation à un état confirmé en un clic, son glyphe dépassant sa taille réelle avant de s'installer.

Centered modal frame

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.

Edge-tilt alert modal

2147Edge-tilt alert modalSuperpositionsUn mode d'avertissement pour les actions irréversibles qui monte et s'incline à partir du bord inférieur avec un dépassement élastique et se ferme uniquement via ses propres boutons.

Toss to bin delete

2258Toss to bin deleteBoutonsUne poubelle dessinée dont le couvercle s'ouvre à la presse tandis qu'une feuille froissée se soulève et tombe dedans.

Blocking alert dialog

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.

Confirm action modal

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.

Add Then Confirm Chip

2466Add Then Confirm ChipBoutonsUne puce sombre avec une étiquette chaude dont le plus oscille d'un côté à l'autre au survol, puis se transforme en coche et signale l'élément ajouté.

Follow latch chip

2473Follow latch chipBoutonsUne puce de suivi qui prévisualise son état rempli au survol et s'y verrouille au clic, passant à une invite de non-suivi dans une teinte d'avertissement lors du survol à nouveau.

2485Rocking icon CTABoutonsUne pilule d'accent solide dont l'icône de calendrier principale bascule comme un métronome en survol et, lorsque vous cliquez dessus, dessine une coche et remplace le libellé par une étiquette confirmée avant de revenir en arrière.

Flight path confirm button

2524Flight path confirm buttonBoutonsUn bouton de réservation qui fait faire un tour à un petit avion autour de son visage pendant que trois points clignotent, puis devient vert et signale que la réservation est confirmée.

Staged expand delete button

2551Staged expand delete buttonBoutonsUne vignette d'icône de corbeille carrée qui s'élargit après un court délai de survol, fait apparaître son étiquette en fondu et demande un deuxième clic de confirmation avant de se déclencher.

Hold to fill pad

2570Hold to fill padBoutonsUn tampon translucide qui se remplit vers le haut à partir de sa base aussi longtemps qu'il est tenu, puis engage et fait clignoter sa bordure lorsque le remplissage atteint le sommet.

Copy flick tile

2590Copy flick tileBoutonsUne tuile carrée contenant une pile de deux pages ; un appui long fait disparaître la première page, confirme la copie dans la légende, puis réinitialise la pile.

Check stroke submit

2594Check stroke submitBoutonsUn bouton de soumission compact et rempli dont la coche principale se dessine coup par coup lorsque l'action réussit.

Spin Off Thanks

2600Spin Off ThanksBoutonsUn appel à l'action à deux faces où la face supérieure tourne et tombe tandis qu'une seconde face se lève derrière elle pour prendre le relais.

Slide away destructive

2619Slide away destructiveBoutonsUn bouton destructeur dont l'étiquette glisse vers la gauche pour ne laisser qu'une croix, puis se transforme en un visage de réussite avec une coche pendant un instant lorsqu'on appuie dessus.

2628Icon takeover deleteBoutonsUn bouton destructeur divisé en un mot gras et une cellule d'icône étroite ; le survol ou la mise au point agrandit la cellule sur tout le bouton jusqu'à ce qu'il ne reste que le glyphe, avec une confirmation en deux clics au toucher.

Destructive sweep button

2696Destructive sweep buttonBoutonsUne action de suppression dont les nuances allant du rose au pourpre balayent de bout en bout en survol, inclinant le couvercle de la poubelle, avec une prise facultative pour confirmer la ligne le long du bord inférieur.

Letter swap copy button

2718Letter swap copy buttonBoutonsUn bouton de copie en relief dont l'étiquette se reconstruit lettre par lettre au survol tandis que sa puce d'icône pulse et dessine un chèque lorsque la copie atterrit.

Send flight button

2724Send flight buttonBoutonsUn bouton lumineux brossé qui joue une courte séquence d'envoi : le glyphe en papier s'envole, une étiquette d'envoi compte ses points, puis un chèque arrive.

Orbiting confirm chips

2775Orbiting confirm chipsBoutonsUn bouton d'icône rond qui lance une puce de confirmation et une puce de rejet en survol ou en mise au point, puis les ramène en dessous.

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.

Add Then Confirm Chip
Une puce sombre avec une étiquette chaude dont le plus oscille d'un côté à l'autre au survol, puis se transforme en coche et signale l'élément ajouté.
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.
Centered modal frame
Un 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.

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)