Composants

outline

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 63

Chargement de l’index de recherche complet.

Intent button set

1638Intent button setBoutonsUne famille complète de boutons dans un seul fichier : solides, souples, contours, fantômes, liens et poids de danger dans quatre tailles, avec des emplacements pour icônes, un état occupé et une véritable bague de mise au point.

Drifting border sheen

1685Drifting border sheenArrière-plansUn panneau dont le contour est éclairé par une douce lueur bicolore, plusieurs fois la taille du panneau, dérivant lentement autour du cadre.

Focus halo button

1696Focus halo buttonBoutonsUn bouton solide qui s'inverse en un contour lors du survol du pointeur et fait croître deux anneaux translucides empilés au moment où il prend le focus du clavier.

Lift and fill pill

1713Lift and fill pillBoutonsUne pilule décrite qui saute d'une distance fixe vers le haut et se remplit de son accent lorsqu'elle est pointée, puis retombe sur la même courbe.

Center out fill button

1848Center out fill buttonBoutonsUn bouton en majuscule avec un contour dont le remplissage d'accent s'ouvre à partir d'une racine des cheveux au centre jusqu'aux deux bords lors du survol ou de la mise au point.

Diagonal swipe button

1850Diagonal swipe buttonBoutonsUn bouton décrit tenant une fine lame inclinée qui se redresse et s’élargit jusqu’à inonder le cadre en survol.

Edge tracking glow card

1854Edge tracking glow cardCartesUne carte dont le contour ne s'éclaire que là où le pointeur s'en rapproche, s'éclaircissant à mesure que vous vous approchez du bord et s'assombrissant vers le milieu.

Hard Shadow Button

1864Hard Shadow ButtonBoutonsUn bouton au contour épais qui soulève son ombre décalée solide au survol et s'y appuie au clic.

Corner ticks frame button

1944Corner ticks frame buttonBoutonsUn rectangle sombre marqué uniquement par quatre graduations de coin qui s'étendent pour dessiner un cadre complet, après quoi un panneau éclairé s'ouvre depuis le centre et l'étiquette s'inverse.

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.

Invert Fill Button

1984Invert Fill ButtonBoutonsUn petit bouton avec un contour qui se remplit au survol tandis que son étiquette passe à la valeur opposée, échangeant proprement le premier plan et l'arrière-plan.

Crackling border frame

2135Crackling border frameAnimationUne monture arrondie dont le contour est redessiné à chaque image comme un arc de lumière tremblant, avec une lueur constante en dessous et parfaitement immobile sur le dessus.

Diagonal shutter fill button

2141Diagonal shutter fill buttonBoutonsUn bouton décrit qui se remplit lorsque deux pales inclinées pivotent depuis des côtés opposés, se redressent à mi-vol et se rejoignent au milieu.

Focus Lens

2155Focus LensAnimationUne forme décrite qui reste douce et floue partout, sauf dans un petit cercle qui suit le pointeur, où elle devient nette.

Italic outline fill button

2174Italic outline fill buttonBoutonsUn bouton au contour discret, en italique, qui s'inverse en un accent solide dès qu'un pointeur ou un clavier l'atteint.

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.

Arcade plate button

2501Arcade plate buttonBoutonsUn large bouton de menu de jeu avec une plaque à contour gris, un biseau foncé incrusté et des lettres estampées qui s'éclaircissent en survol et s'assombrissent lorsqu'elles sont maintenues enfoncées.

Dashed outline tooltip button

2536Dashed outline tooltip buttonBoutonsUn bouton fantôme en pointillés qui inonde de son accent lors du survol ou de la mise au point tandis qu'une info-bulle pointue se déroule hors du bord le plus proche du bouton.

Diagonal blob flood button

2538Diagonal blob flood buttonBoutonsUn bouton décrit inondé par une grande goutte arrondie qui glisse en diagonale depuis son coin supérieur et s'assombrit lorsqu'il est maintenu enfoncé.

Jello squash button

2556Jello squash buttonBoutonsUn bouton décrit qui inonde de couleur au survol et vacille à travers une séquence d'écrasement et d'étirement avant de se stabiliser.

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

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.

Corner bracket frame button

2596Corner bracket frame buttonBoutonsUne étiquette majuscule nue qui est encadrée par deux supports en forme de L coulissant depuis des côtés opposés puis s'agrandissant pour fermer le cadre.

Edge wipe invert

2597Edge wipe invertBoutonsUn bouton avec contour dont le remplissage uni s'efface à partir d'un bord et inverse l'étiquette lorsqu'elle passe en dessous.

Clamp jaws glow button

2598Clamp jaws glow buttonBoutonsUn bouton au contour creux dont les graduations latérales glissent, fusionnent dans les mâchoires et se ferment sur l'étiquette avec une lueur d'accent au survol ou à la mise au point.

Diagonal orb fill button

2626Diagonal orb fill buttonBoutonsUn cercle surdimensionné glisse d'un coin à l'autre sur un bouton décrit, le remplissant sur la diagonale et s'assombrit dès que vous appuyez sur.

Corner bracket seal button

2644Corner bracket seal buttonBoutonsDeux supports d'angle courts poussent le long des bords jusqu'à ce qu'ils se scellent pour former un cadre complet autour de l'étiquette en survol.

Frame draw button

2646Frame draw buttonBoutonsUn bouton rempli qui se vide en survol tandis que quatre fines barres sortent des coins opposés pour dessiner un cadre complet, puis tout revient en congé.

Hairline trace submit

2647Hairline trace submitBoutonsUn bouton de soumission sombre dont la ligne d'un pixel s'allume, traçant le périmètre à partir du bord entré par le pointeur, puis recule de la même manière.

Ink bloom button

2662Ink bloom buttonBoutonsUn bouton aux contours épais dont la teinte translucide est dépassée par un disque d'accent solide qui s'épanouit depuis le centre lors du survol ou de la mise au point du clavier.

Lifting hard shadow pill

2663Lifting hard shadow pillBoutonsUne pilule aux contours épais qui dérive vers le haut et vers la gauche en survol tandis que son ombre plate et solide s'étend en dessous et se presse contre la page lorsqu'elle est maintenue.

Bevel frame button

2674Bevel frame buttonBoutonsUn bouton à cadre carré dont les deux extrémités se biseautent en pointes au survol, transformant le rectangle en un badge à six côtés.

Halo ring button

2677Halo ring buttonBoutonsUn bouton encadré qui projette un seul anneau vers l'extérieur lorsque vous le survolez, la bande s'étendant au-delà du bord et s'amincissant au fur et à mesure.

Invert and lift button

2700Invert and lift buttonBoutonsUn grand bouton au contour qui s'inverse en un remplissage uni et soulève quelques pixels en survol, puis se stabilise à nouveau à plat lorsqu'on appuie dessus.

Border trace button

2709Border trace buttonBoutonsUn bouton translucide silencieux dont les quatre bords se dessinent en séquence au survol tandis qu'une douce bande de lumière traverse le visage.

Draining fill button

2763Draining fill buttonBoutonsUn bouton inondé qui s'écoule d'un bord lors du survol, laissant un contour creux avec l'étiquette retournée vers l'accent.

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.

Arcade plate button
Un large bouton de menu de jeu avec une plaque à contour gris, un biseau foncé incrusté et des lettres estampées qui s'éclaircissent en survol et s'assombrissent lorsqu'elles sont maintenues enfoncées.
Bevel frame button
Un bouton à cadre carré dont les deux extrémités se biseautent en pointes au survol, transformant le rectangle en un badge à six côtés.
Border trace button
Un bouton translucide silencieux dont les quatre bords se dessinent en séquence au survol tandis qu'une douce bande de lumière traverse le visage.

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)