Composants

chip

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

22 sur 22

Shortcut chip button

1651Shortcut chip buttonBoutonsUn petit bouton à puce qui annonce un raccourci clavier, incline son glyphe en survol et efface une fine bande de lumière sur lui-même.

Corner flood button

1678Corner flood buttonBoutonsUn bouton rectangulaire sombre avec une petite puce de couleur garée à moitié dans son coin supérieur gauche qui gonfle jusqu'à inonder tout le visage lorsque le bouton est enfoncé.

Swallowing Chip Button

1895Swallowing Chip ButtonBoutonsUn bouton de pilule avec une petite puce lumineuse épinglée sur son bord droit qui s'élargit au survol jusqu'à recouvrir tout le bouton.

Brightening gradient button

1926Brightening gradient buttonBoutonsUne puce bicolore profonde dont le lavage vertical grimpe vers une paire beaucoup plus lumineuse de la même famille en survol, avec un reflet en verre fixe le long de son bord supérieur.

Emboss swap button

1955Emboss swap buttonBoutonsUn petit éclat saturé qui échange son ombre projetée plate contre un relief moulé dans quatre directions au survol, de sorte que la surface semble être pressée hors de la page.

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.

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

Shortcut key chip

2228Shortcut key chipAffichage des donnéesDe petites puces en forme de pilule représentant des touches individuelles du clavier, placées côte à côte pour épeler un raccourci.

Expanding chip back button

2350Expanding chip back buttonBoutonsUn bouton de pilule pâle dont la puce d'accent s'étend sur toute la largeur en survol, portant sa flèche vers l'autre côté tandis que l'étiquette reste en place et est recouverte.

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.

Meshing gears chip

2387Meshing gears chipBoutonsUne puce de réglage avec deux rouages imbriqués qui tournent dans des directions opposées chaque fois que le pointeur est dessus, à des vitesses définies par leur nombre de dents.

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

Scribble Edit Chip

2468Scribble Edit ChipBoutonsUne puce d'édition dont le crayon trace un court gribouillage d'avant en arrière au survol tandis qu'un soulignement bancal se dessine sous l'étiquette, et un clic l'épingle en tant que cible d'édition active.

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.

2476Icon reveal chipBoutonsUne petite puce décrite qui inonde de son accent au survol tandis que l'étiquette glisse vers la gauche et qu'un glyphe caché apparaît en fondu depuis la droite.

Lifting share chip

2480Lifting share chipBoutonsUne petite puce solide avec un glyphe et une courte étiquette en majuscules qui soulève quelques pixels et s'adoucit au survol, se met en place lorsqu'on appuie dessus et peut faire basculer un glyphe rempli.

Repeat mode cycler

2495Repeat mode cyclerBoutonsUne puce teintée qui désactive un réglage de boucle, une fois pour toutes à chaque clic, faisant tourner sa flèche vers l'arrière à chaque changement.

Return to top chip

2505Return to top chipBoutonsUne petite puce de coin qui glisse dans la vue une fois que son panneau défile au-delà d'un seuil, se soulève sous le pointeur et fait glisser le panneau vers le haut en cliquant.

Elevated chip button

2534Elevated chip buttonBoutonsUn éclat arrondi pâle reposant sur des ombres douces empilées qui se teinte vers l'accent au survol et s'enfonce sur une ombre plus profonde avec un contour d'accent lorsqu'on appuie dessus.

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

Arrow chip button

2640Arrow chip buttonBoutonsUn bouton d'action arrondi avec une flèche lumineuse ancrée à son extrémité droite qui se soulève de la page au survol avec une ombre décalée dure et coule à la pression.

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é.
Arrow chip button
Un bouton d'action arrondi avec une flèche lumineuse ancrée à son extrémité droite qui se soulève de la page au survol avec une ombre décalée dure et coule à la pression.
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é.

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)