Composants

status

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

Orbit loader

1534Orbit loaderIcônesUn indicateur de chargement dont les trois points parcourent une orbite à un tiers de tour l'un de l'autre, chacun traçant une courte traînée, tandis qu'un arc balaie l'anneau extérieur dans l'autre sens.

Assistant Ripple Glow

1665Assistant Ripple GlowArrière-plansUne ondulation en forme d'anneau s'étend vers l'extérieur sur une copie du contenu d'un panneau tandis que son bord s'allume aussi longtemps qu'une tâche est en cours d'exécution.

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.

1957Field with status iconFormulairesUne entrée étiquetée dont le bord arrière affiche une petite icône de vérification ou d'avertissement qui disparaît au moment où la validité du champ change, sans modifier la présentation.

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.

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.

2016Presence Avatar ClustersAffichage des donnéesDeux groupes d'avatars qui se chevauchent, en ligne et hors ligne, où cliquer sur un avatar le fait glisser dans l'autre groupe tandis que son portrait effectue un fondu enchaîné vers ou depuis les niveaux de gris.

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

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.

Sweeping status text

2060Sweeping status textEffets de texteUn grand mot de statut qui échange sur un rythme régulier tandis qu'une bande lumineuse parcourt sans fin les formes des lettres.

Task Log Loader

2065Task Log LoaderMessages d’étatUn indicateur fonctionnel qui associe un anneau rotatif imbriqué à un court journal numéroté dont les lignes défilent vers le haut à mesure que chaque étape est terminée.

Transfer status card

2070Transfer status cardMessages d’étatUne carte de transfert d'argent qui passe d'un état de traitement à un état terminé, avec une icône tournante s'installant dans une coche et les deux lignes de compte fusionnant.

Filterable record table

2154Filterable record tableAffichage des donnéesFiltrez les clients, triez les colonnes et contrôlez la recherche depuis votre application.

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.

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.

Upload Progress Line

2262Upload Progress LineMessages d’étatUne barre de progression fine et animée qui compte une tâche comme un téléchargement de fichier de zéro à la fin, avec une lecture en pourcentage et une animation de règlement à la fin.

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.

Assistant Ripple Glow
Une ondulation en forme d'anneau s'étend vers l'extérieur sur une copie du contenu d'un panneau tandis que son bord s'allume aussi longtemps qu'une tâche est en cours d'exécution.
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.
Dot matrix status pill
Un 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.

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)