Composants

pill

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 83

Chargement de l’index de recherche complet.

1827Expanding icon pillBoutonsUn bouton icône rond qui se transforme en une pilule étiquetée lors du survol ou de la mise au point, faisant tourner son glyphe d'une révolution complète à mesure que l'étiquette glisse.

Carved Pill Button

1847Carved Pill ButtonBoutonsUne pilule sculptée dans une surface douce et mate en opposant les ombres intérieures, s'élevant en un coussin surélevé au moment où elle est survolée ou focalisée.

Floating download pill

1857Floating download pillBoutonsUne pilule entièrement arrondie qui semble flotter au-dessus de la page et se rapprocher de celle-ci lorsque vous survolez et appuyez.

Count badge cluster

1945Count badge clusterMessages d’étatUne rangée de pilules de mots et de jetons numériques compacts pour étiqueter ou compter des éléments en ligne.

Gradient shift text

1970Gradient shift textEffets de texteUne pilule arrondie dont le texte est rempli d'un dégradé bicolore qui balaie continuellement les lettres.

Hairline Tone Badge

1977Hairline Tone BadgeMessages d’étatUne étiquette de pilule non remplie dont la bordure et le texte partagent une même couleur, de sorte qu'une rangée d'entre eux se lit comme une légende imprimée.

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.

Circled Arrow Pill

2319Circled Arrow PillBoutonsUne pilule solide à haute saturation avec l'étiquette à gauche et une flèche annelée à droite qui avance en survol.

Download tray pulse button

2339Download tray pulse buttonBoutonsUne pilule à action arrondie avec une petite marque de plateau sur son bord d'attaque, où une pointe de flèche tombe à travers le plateau sur une boucle pendant que le pointeur repose dessus.

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.

Growing Pill Backdrop

2362Growing Pill BackdropBoutonsUne étiquette nue avec un disque teinté caché derrière ses premières lettres qui se transforme en une pilule complète en survol tandis que la flèche glisse en place.

Inset Edge Pill

2371Inset Edge PillBoutonsUne pilule pâle avec un anneau fin tout autour et une lèvre plus épaisse en bas seulement, elle se lit donc comme une clé physique qui inonde de couleurs en survol.

Arrow to label pill

2469Arrow to label pillBoutonsUn bouton à chevron rond qui s'étend en une large pilule étiquetée en survol, échangeant la marque contre un mot tandis que le remplissage à plat devient une rampe à deux arrêts.

Center bloom button

2471Center bloom buttonBoutonsUne pilule solide et arrondie qui s'éclaircit du milieu vers l'extérieur alors qu'un lavis circulaire pâle dépasse ses propres bords, puis s'enfonce à plat lorsqu'on la presse.

Gradient tilt pill

2474Gradient tilt pillBoutonsUne pilule entièrement arrondie dont le remplissage dégradé bicolore oscille son angle en survol et pointe plus sombre vers l'ombre lorsqu'on appuie dessus.

Halo glow button

2475Halo glow buttonBoutonsUne pilule sombre dont le halo d'accent flou s'estompe au survol et se déplace autour du bord tandis qu'un mince anneau intérieur s'éclaircit.

Camera flash pill

2489Camera flash pillBoutonsUne pilule d'accent solide avec un glyphe d'appareil photo qui scintille comme un tube flash en difficulté lors du survol ou de la mise au point, et blanchâtre tout son visage pendant un court battement lorsqu'on appuie dessus.

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.

Invert on hover pill

2528Invert on hover pillBoutonsUne pilule remplie qui échange les couleurs de remplissage et d'étiquette et gonfle légèrement au survol ou au clavier, se pressant en dessous de sa taille de repos lorsqu'elle est pressée.

Italic release pill button

2543Italic release pill buttonBoutonsUne pilule à double bordure dont l'étiquette lourde et inclinée se redresse au survol tandis que le remplissage s'éclaircit et qu'une ombre dure et colorée s'épanouit en dessous, puis s'appuie dessus.

Gap stretch arrow button

2585Gap stretch arrow buttonBoutonsUne pilule de largeur fixe dont la flèche arrière se dirige vers le bord le plus éloigné en survol, étirant l'espace après une étiquette stationnaire, avec une légère copie de trace suivant un battement derrière.

Draining fill button

2588Draining fill buttonBoutonsUne pilule aux contours qui commence entièrement inondée de couleur et s'écoule jusqu'à une fine bande au pied en survol, puis se remplit par le bas en congé.

Edge light pill

2589Edge light pillBoutonsUne pilule brillante éclairée par une barre floue le long de son bord supérieur et une fleur sous son pied qui gonfle et s'éclaircit au survol.

Ring reveal button

2591Ring reveal buttonBoutonsUne pilule surdimensionnée avec une bordure épaisse en anneau dégradé dont la face intérieure sombre s'éclaircit au survol pour exposer le lavis de couleur, puis s'estompe lorsque le pointeur s'éloigne.

Detached Ring Pill

2595Detached Ring PillBoutonsUne pilule sombre en orbite autour d'un anneau de contour flottant qui pousse plus loin et inonde la pilule de couleur en survol.

Arrow relay badge pill

2601Arrow relay badge pillBoutonsUn bouton de pilule avec un badge rond à gauche dont la flèche sort par le coin supérieur en survol tandis qu'un nouveau arrive par le bas et le corps devient presque noir.

Breathing CTA pill

2602Breathing CTA pillBoutonsUn appel à l'action aux extrémités arrondies qui gonfle au survol et s'installe dans une lente impulsion respiratoire d'échelle et de luminosité jusqu'à ce que le pointeur s'en aille ou que le bouton soit enfoncé.

Color relay sign-in

2603Color relay sign-inBoutonsUne pilule de connexion dont la marque à quatre segments transmet ses couleurs une à une aux flots circulaires qui balayent le bouton en relais.

Ghost echo lift button

2606Ghost echo lift buttonBoutonsUne pilule qui se soulève en survol tandis qu'une copie fantôme d'elle-même gonfle derrière elle et se dissout.

Grounded download pill

2608Grounded download pillBoutonsUn bouton de téléchargement entièrement arrondi avec une ombre teintée d’accent qui se resserre lorsque vous appuyez dessus tandis que sa flèche plonge et revient en arrière.

Hairline lift pill

2609Hairline lift pillBoutonsUne pilule translucide silencieuse avec un bord intérieur qui se soulève de la surface et prend une teinte accentuée en survol.

Disc to Pill CTA

2622Disc to Pill CTABoutonsUn petit disque rempli à côté d'une étiquette majuscule nue s'étire en une pilule pleine en survol ou en mise au point, révélant le texte et entraînant la flèche.

Amber upload pill

2707Amber upload pillBoutonsUne pilule de téléchargement en dégradé chaud avec un bord brillant qui élargit sa dominante colorée et éclaire l'étiquette par derrière en survol.

Bevel press pill

2708Bevel press pillBoutonsUne pilule sombre biseautée avec une puce ronde en retrait à son extrémité qui s'enfonce dans la surface lorsqu'on la presse.

Dark Pill Sign In

2712Dark Pill Sign InBoutonsUne pilule sombre à bordure pour la connexion d'un tiers qui s'approfondit vers le noir au survol tandis que son étiquette recule et sa bordure se resserre.

2714Expanding icon pillBoutonsUn bouton d'icône rond qui s'étire en une pilule étiquetée au survol, échangeant son glyphe contre un mot à mesure qu'un remplissage d'accent arrive.

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.

Amber upload pill
Une pilule de téléchargement en dégradé chaud avec un bord brillant qui élargit sa dominante colorée et éclaire l'étiquette par derrière en survol.
Arrow relay badge pill
Un bouton de pilule avec un badge rond à gauche dont la flèche sort par le coin supérieur en survol tandis qu'un nouveau arrive par le bas et le corps devient presque noir.
Arrow to label pill
Un bouton à chevron rond qui s'étend en une large pilule étiquetée en survol, échangeant la marque contre un mot tandis que le remplissage à plat devient une rampe à deux arrêts.

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)