Composants

press

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 77

Chargement de l’index de recherche complet.

Letter cascade button

1712Letter cascade buttonBoutonsUn large bouton solide dont l'étiquette centrée disparaît et se reconstruit une lettre à la fois au fur et à mesure que chaque caractère se met en place par le haut.

Deep Slab Button

1825Deep Slab ButtonBoutonsUne grande dalle qui flotte au-dessus de la page sur une longue ombre diagonale et s'enfonce dessus lorsqu'elle est survolée, puis s'écrase à plat au clic.

Key travel button

1835Key travel buttonBoutonsUne clé arrondie posée sur une base haute qui se raccourcit en survol et disparaît sous la pression, plaçant la clé à plat.

Drifting Gradient Button

1851Drifting Gradient ButtonBoutonsUn bouton dont le remplissage bicolore en diagonale est surdimensionné et ne cesse de glisser, courant plus vite au survol et écrasant au clic.

Edge Collapse Button

1852Edge Collapse ButtonBoutonsUn bouton plat avec une lèvre colorée épaisse le long de son bord inférieur qui se replie jusqu'à la racine des cheveux lorsque le bouton tombe dessus.

Gradient Rim Button

1861Gradient Rim ButtonBoutonsUn bouton construit en deux couches empilées, de sorte qu'un bord ombré de deux pixels encadre un visage légèrement plus sombre, avec un glyphe de manette de jeu.

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.

Lift and Sink Button

1868Lift and Sink ButtonBoutonsUn bouton monospace teinté qui flotte en survol et s'enfonce dans sa propre ombre intérieure lorsqu'on appuie dessus.

Click spark burst

2122Click spark burstMessages d’étatChaque presse projette un anneau de lignes courtes à partir du point de contact exact, chacune s'étirant et se rétrécissant à mesure qu'elle vole.

Hard edge key button

2165Hard edge key buttonBoutonsUne touche matérielle compacte qui retourne sa surbrillance, son contour et son ombre vers l'intérieur dès que vous appuyez dessus.

Hop lift button

2166Hop lift buttonBoutonsUn bouton arrondi qui se soulève et saute dans une courte boucle répétitive lorsqu'il est pointé, puis tombe à plat dans un état de pression plus sombre.

Cartridge fire button

2312Cartridge fire buttonBoutonsUn bouton fantaisie en forme de boîtier en laiton, avec un projectile caché derrière son nez qui jaillit et se recharge lorsqu'on appuie dessus.

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.

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.

Lift and settle button

2479Lift and settle buttonBoutonsUn bouton solide qui flotte vers le haut et prend la couleur d'accent lors du survol, puis passe au-delà de sa ligne de repos dans une ombre réduite lorsqu'il est enfoncé.

Dialog bevel button

2509Dialog bevel buttonBoutonsUn petit bouton système gris construit à partir de deux biseaux durs imbriqués et d'une marque de mise au point intérieure en pointillés, dont les lignes de biseau s'échangent lors de la pression pour qu'elles se lisent comme enfoncées.

Letter drop press button

2517Letter drop press buttonBoutonsUn bouton de touche sur un rebord plus sombre dont l'étiquette disparaît au survol et est reconstruite lettre par lettre par le haut, en appuyant sur le rebord lorsque vous cliquez dessus.

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.

Live keycap

2541Live keycapBoutonsUne touche d'aspect physique qui s'appuie lorsqu'on clique dessus et reflète la touche correspondante sur le vrai clavier du lecteur.

Ivory keycap button

2561Ivory keycap buttonBoutonsUn capuchon de touche pâle surélevé sur un rebord assorti ; le vol stationnaire épaissit son bord encastré et la pression le place au ras de la surface.

Growing ledge button

2566Growing ledge buttonBoutonsUn bouton d'accent solide reposant sur un rebord inférieur plus sombre qui s'épaissit et se soulève en survol, puis s'amincit et s'enfonce sous une presse.

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.

Arcade dome button

2574Arcade dome buttonBoutonsUn bouton-poussoir rond dont le capuchon bombé flotte au-dessus d'une base plus sombre et s'installe au ras d'une goutte visible lorsqu'il est enfoncé.

Capsule in frame button

2583Capsule in frame buttonBoutonsUn plateau extérieur bordé contenant une capsule intérieure flottante qui s'enfonce dans le cadre sur la longueur d'une presse.

Keycap plate button

2587Keycap plate buttonBoutonsUne plaque carrée encadrant une touche arrondie qui descend lors d'une pression et reste enfoncée pendant que le bouton est maintenu enfoncé, par le pointeur ou le clavier.

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.

Molded bevel button

2624Molded bevel buttonBoutonsUn bouton de dalle aux coins durs avec quatre bandes biseautées encastrées, une ombre décalée sans flou et une pression qui le dépose au ras de la surface.

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.

Keycap lift button

2630Keycap lift buttonBoutonsUn bouton à clé mécanique qui se soulève en survol, conserve une lèvre inférieure solide et échange toute sa pile d'ombres vers l'intérieur lorsqu'il est enfoncé.

Border brighten button

2641Border brighten buttonBoutonsUn bouton sombre dont le cadre de deux pixels est la seule partie mobile : il devient blanc au survol et s'effondre en un anneau intérieur étroit lorsque le bouton est maintenu enfoncé.

Inset plate button

2648Inset plate buttonBoutonsUn bouton à l'intérieur d'un bouton : une coque extérieure contient une plaque flottante plus petite qui porte l'étiquette, et une pression réduit uniquement la plaque intérieure tandis que la coque reste en place.

Elevation ladder fill button

2660Elevation ladder fill buttonBoutonsUne capsule qui gravit trois marches d'élévation entre le repos, le survol et la presse tandis qu'un lavis d'accent aux bords doux traverse son visage.

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.

Glide swap button

2715Glide swap buttonBoutonsUn bouton de largeur fixe qui fait glisser son étiquette du bord droit tandis que le glyphe glisse vers le centre, le tout reposant sur un rebord de couleur dure sur lequel le bouton tombe lorsqu'on appuie dessus.

Keycap press button

2717Keycap press buttonBoutonsUn capuchon de touche pâle avec une épaisseur réelle, construit à partir d'ombres dures empilées, qui descend et perd de la hauteur lorsqu'on appuie dessus.

Embossed press button

2765Embossed press buttonBoutonsUn bouton arrondi solide qui se lit comme une clé physique surélevée au repos et se transforme en un bouton encastré, pressed-into-the-surface en survol, en se concentrant et en appuyant.

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 dome button
Un bouton-poussoir rond dont le capuchon bombé flotte au-dessus d'une base plus sombre et s'installe au ras d'une goutte visible lorsqu'il est enfoncé.
Bevel press pill
Une pilule sombre biseautée avec une puce ronde en retrait à son extrémité qui s'enfonce dans la surface lorsqu'on la presse.
Border brighten button
Un bouton sombre dont le cadre de deux pixels est la seule partie mobile : il devient blanc au survol et s'effondre en un anneau intérieur étroit lorsque le bouton est maintenu enfoncé.

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)