Composants

highlight

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

Pressed highlight toggle

1647Pressed highlight toggleBoutonsUn bouton d'icône à deux états qui maintient son état enfoncé visible avec un bloc de surbrillance arrondi se développant derrière le glyphe du centre vers l'extérieur.

Diagonal Glare Sweep

1682Diagonal Glare SweepAnimationUn emballage qui fait glisser une étroite bande de lumière en diagonale sur tout ce qu'il contient lorsque le focus du pointeur ou du clavier arrive.

Light sweep button

1717Light sweep buttonBoutonsUn bouton aux contours discrets dont les lettres et la bordure sont éclairées par une barre de lumière diagonale qui balaie, repose une seconde et balaie à nouveau.

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.

Pointer Spotlight Panel

1876Pointer Spotlight PanelCartesUn panneau de contenu avec une lumière douce qui suit le pointeur sur sa face et se fixe au centre lors de la mise au point du clavier.

Sheen sweep card

1886Sheen sweep cardCartesUne carte avec une bande de lumière garée sur un coin qui traverse le visage en survol et glisse vers l'arrière au moment où le pointeur part.

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.

Marker highlight

1995Marker highlightEffets de texteUne phrase avec une bande de marqueur qui s'efface derrière elle de gauche à droite lorsque la ligne apparaît pour la première fois, laissant les mots posés sur un bloc de couleur.

Quiet File Tree

2019Quiet File TreeAffichage des donnéesUne arborescence de dossiers et de fichiers dans laquelle une surbrillance douce glisse entre les lignes lorsque le pointeur ou le focus du clavier se déplace.

Sliding Selection Highlight

2046Sliding Selection HighlightNavigationUne puce d'arrière-plan flottante partagée qui glisse d'un élément à un autre dans une rangée d'options, suivant l'élément survolé ou cliqué.

Sliding highlight menu

2094Sliding highlight menuSuperpositionsUn menu d'action déclenché par un bouton dans lequel une plaque arrondie glisse entre les rangées lorsque le pointeur ou les touches fléchées se déplacent, plutôt que chaque rangée ne s'éclaire d'elle-même.

Hand-drawn text marker

2164Hand-drawn text markerEffets de texteEnveloppe une partie du texte avec une annotation de marqueur dessinée à la main, telle qu'un lavis de surbrillance, un soulignement, un cercle ou un cadre, qui s'appuie sur un trait d'esquisse légèrement imparfait.

Sliding highlight toggle group

2234Sliding highlight toggle groupChamps de saisieUne rangée de boutons d'icônes avec un panneau de surbrillance qui glisse sous celui actif ou s'efface indépendamment derrière chaque actif en mode multi-sélection.

Sparkling highlight text

2237Sparkling highlight textEffets de texteTexte d'affichage en gras avec une poignée de minuscules étoiles à quatre branches apparaissant et sortant à des endroits aléatoires à travers les lettres, chacune grandissant, tournant brièvement, puis disparaissant pour être remplacée ailleurs.

Twinkle highlight text

2260Twinkle highlight textEffets de texteTexte surligné en gras avec de petites étoiles scintillantes à quatre branches qui apparaissent et sortent continuellement à des positions aléatoires autour et sur les lettres.

Highlighted bar chart

2273Highlighted bar chartGraphiquesUn graphique à barres de catégorie dans lequel une barre est appelée avec un contour en pointillés et un remplissage plus clair, et la légende suit la barre sur laquelle vous pointez.

Reading highlight copy

2410Reading highlight copyEffets de texteUn paragraphe qui s'éclaire mot par mot lorsque vous le faites défiler, laissant les mots lus clairs et les mots non lus atténués, de sorte que la position de défilement sert également de position de lecture.

Sweeping band button

2487Sweeping band buttonBoutonsUn bouton rempli contenant une bande de couleur deux fois sa propre largeur, qui glisse bout à bout au survol pour que le remplissage donne l'impression qu'il se déplace.

Lozenge swipe highlight

2599Lozenge swipe highlightBoutonsUne étiquette monospace nue avec un losange coloré garé à sa droite qui glisse et s'étire pour devenir un point culminant complet au survol.

Polished metal button

2721Polished metal buttonBoutonsUn bouton fini comme du métal brossé, avec une bande lumineuse qui zoome et capte la lumière lorsque le pointeur arrive.

Spotlight fill button

2730Spotlight fill buttonBoutonsUn bouton de pilule dans un accent saturé qui atténue son remplissage sous un voile sombre en survol tandis qu'un doux projecteur ovale suit le pointeur.

Highlight focus swap

2827Highlight focus swapEffets de texteLes mots d'une phrase sont nets à tour de rôle tandis que le reste est flou, avec un cadre de support d'angle lumineux glissant vers la case du mot mis au point.

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.

Brightening gradient button
Une 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.
Diagonal Glare Sweep
Un emballage qui fait glisser une étroite bande de lumière en diagonale sur tout ce qu'il contient lorsque le focus du pointeur ou du clavier arrive.
Edge tracking glow card
Une 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.

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)