Composants

Messages d’état

Notifications, progression, bannières et états vides qui indiquent le résultat.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 43

Chargement de l’index de recherche complet.

Progress ring

1538Progress ringMessages d’étatUne jauge circulaire qui balaie de zéro à sa valeur tandis que le nombre au milieu compte, avec deux marques de seuil qui s'allument lorsque l'arc les dépasse.

Empty State Panel

1922Empty State PanelMessages d’étatUn espace réservé centré affiché à la place d'une liste vide, avec un titre, une description et une ou deux actions de départ.

Click ripple burst

1937Click ripple burstMessages d’étatUn effet de retour de pointeur qui génère une brève forme animée exactement à l'endroit où l'utilisateur clique ou appuie.

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.

Dot matrix status pill

1950Dot matrix status pillMessages d’étatUn bouton de pilule dont le côté gauche est une grille de cinq points sur cinq jouant un court motif de boucle pour chaque état, avec la légende changeant par étape.

Fill progress loading text

1958Fill progress loading textMessages d’étatUne étiquette de chargement apparaît comme un léger contour d'elle-même tandis qu'une copie de couleur unie la remplit à partir de la gauche comme une barre de progression en forme de mot, balayant d'avant en arrière pendant que le travail se déroule.

Fill sweep loading text

1959Fill sweep loading textMessages d’étatUne étiquette de chargement dont le contour pâle se trouve sous une copie entièrement colorée qui s'étend depuis la gauche, atteint toute la largeur et ressort, se répétant aussi longtemps que quelque chose se charge.

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.

Labeled progress bar

1988Labeled progress barMessages d’étatUne piste de progression étiquetée dont le remplissage atteint une nouvelle largeur tandis qu'un pourcentage de lecture compte en douceur pour correspondre.

Layered ring loader

1989Layered ring loaderMessages d’étatUn emblème centré d'anneaux partiels concentriques tournant à différentes vitesses et directions, avec un titre de statut et un sous-titre qui s'effacent en dessous.

Left Rule Notice

1990Left Rule NoticeMessages d’étatUn message discret encadré dont le ton est porté par une seule règle colorée épaisse qui descend sur son bord gauche.

Milestone progress track

1998Milestone progress trackMessages d’étatUne piste de progression marquée à intervalles de quarts, avec un grand numéro de comptage au-dessus et des graduations réussies qui s'éclairent.

Quiet Ring Spinner

2020Quiet Ring SpinnerMessages d’étatUn anneau de chargement minimal à un seul élément : un cercle fin avec un quart coloré qui tourne en continu pour marquer un état occupé.

Scroll Position Progress Bar

2029Scroll Position Progress BarMessages d’étatUne fine barre qui s'étend sur la largeur d'un conteneur à mesure que l'utilisateur le fait défiler du début à la fin.

Segmented progress meter

2032Segmented progress meterMessages d’étatUn indicateur de progression dessiné sous la forme d'une rangée d'encoches qui s'allument à tour de rôle, avec une encoche principale partiellement remplie et une légende nommant l'étape en cours.

Solid Ring Spinner

2047Solid Ring SpinnerMessages d’étatUn indicateur de chargement rembourré et en boîte : un anneau à trait épais avec un bord de couleur accentuée tournant à une vitesse linéaire constante à l'intérieur d'un panneau arrondi.

Spring Fill Progress

2051Spring Fill ProgressMessages d’étatUne fine piste de progression dont le remplissage glisse à chaque nouvelle valeur sur un ressort, avec une lecture qui compte avec elle.

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.

Status Alert Banner

2057Status Alert BannerMessages d’étatUne bannière bordée qui associe une icône à un titre et une description facultative pour afficher un état de réussite ou d'erreur en ligne.

Breathing dot loader

2117Breathing dot loaderMessages d’étatLes points qui restent en place et respirent au lieu de bouger, gonflent et s'assombrissent à leur tour, de sorte que la rangée se lit comme un battement de cœur lent.

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.

Content Loading Card

2129Content Loading CardMessages d’étatUn espace réservé en forme de carte qui respire avec une lente impulsion d'opacité pendant qu'un grand bloc d'image et deux lignes de texte sont toujours en cours de chargement.

Curtain line loader

2138Curtain line loaderMessages d’étatUn rideau de chargement qui se retire derrière une ligne de déplacement lumineuse, coupant le contenu fini au lieu de le faire apparaître en fondu.

Empty State Panel

2148Empty State PanelMessages d’étatUn panneau centré pour une liste ou une vue vide, avec une pile d'icônes déployées, un en-tête, une ligne de support et un bouton d'action principal.

Expanding ring loader

2151Expanding ring loaderMessages d’étatDe fins anneaux qui naissent d'un seul point et s'estompent à mesure qu'ils s'élargissent, se libèrent les uns après les autres pour que le pouls ne s'arrête jamais.

Hopping dot loader

2167Hopping dot loaderMessages d’étatUne courte rangée de points qui sautent dans une vague progressive, chacun quittant le sol un battement après le point à côté.

Infinite loop path loader

2171Infinite loop path loaderMessages d’étatUn chargeur en forme de huit où un segment brillant dessine sans fin autour d'une faible trace, sa tête et sa queue se déplaçant à des vitesses différentes pour que le tableau de bord respire.

Loading Placeholder Blocks

2184Loading Placeholder BlocksMessages d’étatDes blocs d'espace réservés arrondis et sombres qui remplacent un avatar et des lignes de texte empilées pendant le chargement du contenu, avec une bande lumineuse diagonale les balayant de manière synchronisée.

Segment Fade Spinner

2224Segment Fade SpinnerMessages d’étatUn indicateur de chargement composé de huit segments radiaux qui apparaissent et disparaissent en séquence, de sorte qu'un arc lumineux semble se poursuivre autour de l'anneau.

2231Single glyph spinnerMessages d’étatUn ring spinner minimal : un arc à traits fins qui tourne en continu pour signaler qu'une tâche en arrière-plan est en cours d'exécution.

Stacked Alert Toasts

2239Stacked Alert ToastsMessages d’étatUne pile de toasts ancrée dans un coin où les nouvelles notifications se compressent derrière la carte la plus récente et la pile entière se développe en une liste lisible en survol.

Stacked notification tray

2240Stacked notification trayMessages d’étatUne pile de cartes de notification de type téléphone qui se déploie en une liste lisible lorsque vous appuyez dessus et se replie en un seul jeu.

Status cycle pill

2246Status cycle pillMessages d’étatUne pilule qui passe par les états d'inactivité, de travail, terminé et d'erreur à chaque pression, en échangeant son étiquette, son icône et sa couleur avec une transition pop rapide.

Step goal progress bar

2247Step goal progress barMessages d’étatUne barre de progression arrondie qui suit les étapes terminées sur un total, affichant une étiquette de fraction au-dessus d'un remplissage doucement animé.

Sweeping progress bar

2250Sweeping progress barMessages d’étatUne barre de chargement indéterminée dans un cadre en forme de pilule, passant de rien à toute la largeur et revenant à rien dans une boucle sans fin et lisse.

Plan limit alert

2880Plan limit alertMessages d’étatAffichez le stockage restant et enregistrez un seuil ou demandez une révision du forfait.

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.

Empty State Panel
Un espace réservé centré affiché à la place d'une liste vide, avec un titre, une description et une ou deux actions de départ.
Breathing dot loader
Les points qui restent en place et respirent au lieu de bouger, gonflent et s'assombrissent à leur tour, de sorte que la rangée se lit comme un battement de cœur lent.
Click ripple burst
Un effet de retour de pointeur qui génère une brève forme animée exactement à l'endroit où l'utilisateur clique ou appuie.

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)