Composants

toggle

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

36 sur 65

Chargement de l’index de recherche complet.

1533Morph menu iconIcônesUn bouton de menu dont les trois barres se transforment en croix et reviennent, le barreau du milieu se rétractant lorsque les deux barreaux extérieurs se croisent.

Day night sweep toggle

1631Day night sweep toggleBoutonsUn bouton icône qui fait alterner un panneau de paramètres entre clair, sombre et automatique, en le repeignant avec un bord coupé dur qui balaie au lieu d'un fondu.

Format toggle button

1634Format toggle buttonBoutonsUn bouton icône qui maintient un état activé ou désactivé, faisant disparaître une plaque arrondie derrière son glyphe lorsqu'on appuie dessus.

1640Latching icon toggleBoutonsUn bouton carré qui s'enclenche et se désactive : une plaque remplie apparaît en fondu, le glyphe est remplacé par son homologue correspondant et une légende à côté indique l'état en mots.

Dismiss exit card

1770Dismiss exit cardAnimationUne carte qui rétrécit et s'estompe lors de sa sortie et réapparaît lorsqu'elle est restaurée, avec la disposition environnante immobile pour que rien ne saute.

Check draw toggle

1932Check draw toggleChamps de saisieUne case à cocher carrée dont la coche se dessine trait par trait lorsqu'elle est cochée, avec une pression douce et une échelle de survol.

Chevron flip tile

1936Chevron flip tileBoutonsUne tuile icône carrée dont le chevron s'articule à plat et s'ouvre dans l'autre sens, chaque moitié pivotant sur le joint où elles se rencontrent.

Elastic toggle switch

1954Elastic toggle switchChamps de saisieUne pilule à bascule dont le pouce rond s'écrase en une goutte lorsqu'il est pressé et revient pour s'arrondir avec un léger rebond, glissant entre un état neutre et un remplissage d'accent solide.

FAQ Accordion

1956FAQ AccordionAffichage des donnéesUne liste verticale d'en-têtes de questions dans laquelle l'ouverture d'un panneau fait apparaître sa réponse et ferme le panneau ouvert avant lui.

1980Icon crossfade switchChamps de saisieUn interrupteur à bascule dont l'icône en forme de pouce s'estompe et se transforme en une icône différente lorsque l'interrupteur bascule entre éteint et allumé.

Bookmark save chip

2115Bookmark save chipBoutonsUne puce de sauvegarde compacte dont le signet passe du contour au remplissage et tire légèrement vers le bas au moment où un élément est enregistré.

Metric switch bar chart

2280Metric switch bar chartGraphiquesUn graphique à barres quotidien dense avec deux vignettes métriques dans l'en-tête ; cliquer sur une tuile transforme les barres en cette métrique.

Bubble burst menu

2309Bubble burst menuNavigationUne pilule à logo flottant et une bascule qui se transforment en une superposition plein écran de liens de pilule surdimensionnés, chacun se mettant en place avec un décalage élastique.

Circle reveal sidebar

2318Circle reveal sidebarNavigationUn panneau de menu qui s'ouvre sous la forme d'un cercle s'élevant à partir de sa propre bascule, avec des lignes apparaissant en séquence et les barres de bascule se repliant en croix.

Drawn check checkbox

2343Drawn check checkboxChamps de saisieUne case à cocher dont la coche se dessine trait par trait à mesure que la case se remplit d'une couleur d'accent unie.

Key Turn Chip

2373Key Turn ChipBoutonsUne petite puce remplie dont le glyphe de clé tremble comme s'il sentait un verrou en survol, puis tourne d'un quart et se déverrouille au clic.

Labeled checkbox

2375Labeled checkboxChamps de saisieUne petite case à cocher carrée associée à une étiquette de texte, affichée en clair, avec un texte d'assistance, désactivée et sous forme de carte qui met en évidence sa bordure lorsqu'elle est cochée.

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é.

Breathing transport toggle

2470Breathing transport toggleBoutonsUne puce de lecture teintée qui bascule entre lecture et pause au clic, son glyphe respirant pendant que le pointeur repose dessus.

Counting follow chip

2472Counting follow chipBoutonsUne puce décrite qui associe une étiquette à un nombre de suiveurs, faisant défiler les chiffres modifiés vers le haut à travers une fenêtre masquée lorsqu'elle est verrouillée et vers le bas lorsqu'elle est relâchée.

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.

Follow count swipe

2492Follow count swipeBoutonsUne pilule de suivi décrite dont l'insigne d'accent rond glisse jusqu'à l'extrémité en survol, peignant une bande qui révèle le nombre de followers ; cliquer valide le suivi avec un tampon et augmente le décompte.

Cross morph menu button

2502Cross morph menu buttonBoutonsUne fine icône de menu à trois barres qui se replie en une croix rapprochée, les barres extérieures se déplaçant vers la ligne centrale avant de se diviser et de se recolorer.

Pivot bars menu button

2503Pivot bars menu buttonBoutonsUn bouton de menu dont les trois barres irrégulières oscillent d'un quart de tour et se rétrécissent en une courte colonne de points, changeant de couleur au fur et à mesure.

Plus to cross tile

2512Plus to cross tileBoutonsUne petite tuile carrée portant un signe plus qui tourne de quarante-cinq degrés en une croix serrée et gonfle d'une fraction en tournant.

Expanding disc mute toggle

2520Expanding disc mute toggleBoutonsUne icône ronde bascule où un disque sombre se développe à partir du centre pour avaler le visage pastel, retournant le glyphe à la lumière lorsqu'il passe en dessous.

Captioned Like Button

2550Captioned Like ButtonBoutonsUn bouton cardiaque composé uniquement d'icônes qui révèle une légende s'élevant du dessous lors du survol ou de la mise au point, et se remplit avec un dépassement rapide lorsque vous l'aimez.

Collapsing share button

2553Collapsing share buttonBoutonsUne pilule étiquetée qui se réduit à un glyphe rond tandis qu'une bande de tuiles de liaison flotte dans l'espace qu'elle laisse.

Bookmark save toggle

2575Bookmark save toggleBoutonsUne puce de sauvegarde compacte dont le glyphe de signet se remplit de manière unie et conserve une bordure fine une fois l'élément enregistré.

Glass tube element tile

2607Glass tube element tileBoutonsUne tuile carrée sélectionnable encadrée comme une longueur de tube de verre éclairé, avec un symbole d'élément à l'intérieur qui s'éclaire au survol et se verrouille lorsqu'il est sélectionné.

Chat launcher morph

2675Chat launcher morphBoutonsUn lanceur rond dont le contour de la bulle se redessine en une marque rapprochée tandis que ses trois points rétrécissent.

Heartbeat like button

2686Heartbeat like buttonBoutonsUn bouton rond dont le cœur grandit en survol avec un battement régulier ; en cliquant sur les loquets, il a aimé et coche le compte à côté.

Mood swap button

2719Mood swap buttonBoutonsUn bouton rond contenant un visage dessiné qui change d'expression lorsque vous survolez et appuyez, puis verrouille l'ambiance lorsque vous cliquez dessus.

Bounce drop toggle

2759Bounce drop toggleChamps de saisieUn grand interrupteur à bascule vertical dont la boule tombe vers le bas avec un mouvement rebondissant lorsqu'elle est éteinte et remonte avec un ressort serré lorsqu'elle est allumée.

Layout toggle switch

2771Layout toggle switchChamps de saisieUn commutateur dont le bouton traverse la piste en animant un changement de disposition réel plutôt qu'une translation, de sorte que le lancer reste exact quelle que soit la largeur de la piste.

Latching square toggle

2808Latching square toggleChamps de saisieUn bouton d'icône carré compact qui se verrouille entre un état désactivé légèrement délimité et un état enfoncé plein d'accents.

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é.
Bookmark save chip
Une puce de sauvegarde compacte dont le signet passe du contour au remplissage et tire légèrement vers le bas au moment où un élément est enregistré.
Bookmark save toggle
Une puce de sauvegarde compacte dont le glyphe de signet se remplit de manière unie et conserve une bordure fine une fois l'élément enregistré.

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)