Composants

badge

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

21 sur 21

Crossing ripple tile

1679Crossing ripple tileBoutonsUne tuile de badge carrée où deux points arrivent depuis des bords opposés, se gonflent en cercles qui se chevauchent qui inondent le visage et déroulent une légende en dessous.

Hard shadow store badge

1705Hard shadow store badgeBoutonsUn badge de magasin carré posé sur une ombre décalée solide qui se rapproche en survol, balaie une bande de lumière sur lui-même et tamponne à plat lorsqu'on appuie dessus.

Ringing bell badge

1740Ringing bell badgeBoutonsUn bouton de cloche de notification dessiné à partir de formes simples qui oscille dans les deux sens avec un petit coup de pied et comporte un décompte en direct des non lus.

Rising Fill Badge

1741Rising Fill BadgeBoutonsUne tuile carrée dont le badge rond rétrécit et grimpe tandis qu'un grand cercle s'efface vers le haut depuis le bas et qu'une légende s'élève dans l'espace qu'elle laisse.

Brushed Metal Pass

1845Brushed Metal PassCartesUne carte d'accès dont la face en métal brossé porte une bande spéculaire qui oscille avec le pointeur, sur une surface sonore ondulée et un grain fin.

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.

Count wheel badge

1946Count wheel badgeAffichage des donnéesUne roue numérique verticale qui roule par étapes arrondies jusqu'à un total, avec une étoile centrale qui se remplit à mesure que le décompte augmente.

Glare Pass Text

1967Glare Pass TextEffets de texteLe texte de l'étiquette en sourdine capte périodiquement une étroite bande de lumière qui glisse dessus, comme un reflet se reflétant sur du verre, puis se tait avant de se répéter.

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.

Sliding digit counter

2042Sliding digit counterAffichage des donnéesUn total qui compte en faisant rouler chaque colonne de chiffres pendant qu'une étoile se remplit à côté d'elle et fait éclater quelques particules lorsqu'elle atterrit.

Stacked notification drawer

2055Stacked notification drawerMessages d’étatUne pile compacte de cartes de notification qui se cache derrière sa carte supérieure jusqu'à ce qu'elle soit planée, puis se déploie en une liste entièrement lisible avant de se replier.

Rotating badge text

2217Rotating badge textEffets de texteUne courte phrase répétitive est disposée lettre par lettre autour d'un cercle complet et tourne lentement et continuellement, comme un badge estampé ou une étiquette en vinyle.

Spinning text ring

2238Spinning text ringEffets de texteUne courte phrase répétée placée lettre par lettre autour d'un cercle qui tourne régulièrement sur place, comme le bord d'une pièce de monnaie ou un sceau de timbre.

2245Status AvatarAffichage des donnéesUn avatar rond qui reprend ses initiales sans image et peut porter un petit badge de statut en ligne ou être empilé avec d'autres.

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.

Outset ring tilt button

2544Outset ring tilt buttonBoutonsUn bouton de style badge avec un anneau épais flottant à l'extérieur de son bord qui s'agrandit, s'incline de quelques degrés et laisse tomber une ombre dure 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.

Orbiting caption disc

2613Orbiting caption discBoutonsUn bouton circulaire dont la légende en majuscule parcourt le bord intérieur dans une orbite lente et sans fin tandis qu'un badge central relaie sa flèche en survol.

2716Icon badge sendBoutonsUn bouton d'envoi arrondi dont le glyphe se trouve dans un badge circulaire translucide qui s'éclaire et tourne tandis que l'ensemble du bouton se soulève au survol et se stabilise à la pression.

Looping text ribbon

2828Looping text ribbonEffets de texteUn ruban coloré porte une phrase répétitive le long d’un chemin ondulé, circulaire ou arqué, défilant sans fin comme un sceau ou un badge.

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.

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.
Brushed Metal Pass
Une carte d'accès dont la face en métal brossé porte une bande spéculaire qui oscille avec le pointeur, sur une surface sonore ondulée et un grain fin.
Count badge cluster
Une rangée de pilules de mots et de jetons numériques compacts pour étiqueter ou compter des éléments en ligne.

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)