Components

Feedback

Toasts, progress, banners and empty states that report back.

36 of 42

Loading the full search index.

Progress ring

1538Progress ringFeedbackA circular gauge that sweeps from zero to its value while the number in the middle counts along, with two threshold marks that light up as the arc passes them.

Empty State Panel

1922Empty State PanelFeedbackA centered placeholder shown in place of an empty list, with a title, description and one or two starting actions.

Click ripple burst

1937Click ripple burstFeedbackA pointer-feedback effect that spawns a brief animated shape exactly where the user clicks or taps.

Count badge cluster

1945Count badge clusterFeedbackA row of word pills and compact numeric tokens for labeling or counting things inline.

Dot matrix status pill

1950Dot matrix status pillFeedbackA pill button whose left side is a five by five dot grid playing a short looping pattern for each state, with the caption swapping in step.

Fill progress loading text

1958Fill progress loading textFeedbackA loading label sits as a faint outline of itself while a solid colored copy fills it in from the left like a progress bar shaped like the word, sweeping back and forth while work happens.

Fill sweep loading text

1959Fill sweep loading textFeedbackA loading label whose faint outline sits under a fully colored copy that sweeps in from the left, reaches full width, and drains back out, repeating for as long as something loads.

Hairline Tone Badge

1977Hairline Tone BadgeFeedbackAn unfilled pill label whose border and text share one color, so a row of them reads like a printed legend.

Labeled progress bar

1988Labeled progress barFeedbackA labeled progress track whose fill eases to a new width while a percentage readout counts smoothly to match.

Layered ring loader

1989Layered ring loaderFeedbackA centered emblem of concentric partial rings spinning at different speeds and directions, with a status title and subtitle fading in below.

Left Rule Notice

1990Left Rule NoticeFeedbackA quiet boxed message whose tone is carried by a single thick colored rule running down its left edge.

Milestone progress track

1998Milestone progress trackFeedbackA progress track marked at quarter intervals, with a big counting number above it and passed ticks that brighten.

Quiet Ring Spinner

2020Quiet Ring SpinnerFeedbackA minimal single-element loading ring: a thin circle with one colored quarter that spins continuously to mark a busy state.

Scroll Position Progress Bar

2029Scroll Position Progress BarFeedbackA thin bar that grows across a container's width as the user scrolls it from start to end.

Segmented progress meter

2032Segmented progress meterFeedbackA progress meter drawn as a row of notches that light up in turn, with a partly filled leading notch and a caption naming the current stage.

Solid Ring Spinner

2047Solid Ring SpinnerFeedbackA padded, boxed loading indicator: a thick-stroked ring with one accent-colored edge spinning at a constant linear speed inside a rounded panel.

Spring Fill Progress

2051Spring Fill ProgressFeedbackA slim progress track whose fill glides to each new value on a spring, with a readout that counts along with it.

Stacked notification drawer

2055Stacked notification drawerFeedbackA compact stack of notification cards that hides behind its top card until hovered, then fans out into a fully readable list before collapsing back.

Status Alert Banner

2057Status Alert BannerFeedbackA bordered banner that pairs an icon with a title and optional description to surface a success or error state inline.

Task Log Loader

2065Task Log LoaderFeedbackA working indicator that pairs a nested ring spinner with a short numbered log whose lines scroll up as each step completes.

Breathing dot loader

2117Breathing dot loaderFeedbackDots that stay put and breathe instead of moving, swelling and dimming in turn so the row reads as a slow heartbeat.

Click spark burst

2122Click spark burstFeedbackEvery press throws a ring of short lines out from the exact point of contact, each one stretching away and shrinking to nothing as it flies.

Content Loading Card

2129Content Loading CardFeedbackA card-shaped placeholder that breathes with a slow opacity pulse while a large image block and two lines of text are still loading.

Curtain line loader

2138Curtain line loaderFeedbackA loading curtain that retreats behind a bright travelling line, cutting the finished content into view instead of fading it in.

Empty State Panel

2148Empty State PanelFeedbackA centered panel for an empty list or view, with a fanned icon stack, a heading, a supporting line, and a primary action button.

Expanding ring loader

2151Expanding ring loaderFeedbackThin rings that grow out of a single point and fade as they widen, released one after another so the pulse never stops.

Hopping dot loader

2167Hopping dot loaderFeedbackA short row of dots that hop in a travelling wave, each one leaving the floor a beat after the dot beside it.

Infinite loop path loader

2171Infinite loop path loaderFeedbackA figure eight loader where a bright segment draws endlessly around a faint track, its head and tail moving at different rates so the dash breathes.

Loading Placeholder Blocks

2184Loading Placeholder BlocksFeedbackDim rounded placeholder blocks that stand in for an avatar and stacked text lines while content loads, with a diagonal light band sweeping across them in sync.

Segment Fade Spinner

2224Segment Fade SpinnerFeedbackA loading indicator of eight radial segments that fade in and out in sequence so a bright arc appears to chase itself around the ring.

2231Single glyph spinnerFeedbackA minimal ring spinner: one thin stroked arc that continuously rotates to signal a background task is running.

Stacked Alert Toasts

2239Stacked Alert ToastsFeedbackA corner-anchored toast stack where new notifications compress behind the newest card and the whole stack expands into a readable list on hover.

Stacked notification tray

2240Stacked notification trayFeedbackA phone-style pile of notification cards that fans out into a readable list when tapped and collapses back into a single deck.

Status cycle pill

2246Status cycle pillFeedbackA pill that steps through idle, working, done, and error states on each tap, swapping its label, icon, and color with a quick pop transition.

Step goal progress bar

2247Step goal progress barFeedbackA rounded progress bar that tracks completed steps out of a total, showing a fraction label above a smoothly animated fill.

Sweeping progress bar

2250Sweeping progress barFeedbackAn indeterminate loading bar in a pill-shaped frame, growing from nothing to full width and back to nothing in a smooth endless loop.

Open the full index

Tags

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)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)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 (6)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 (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)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)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)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 (12)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 (8)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)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)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 (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)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 (11)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)wrapper (3)zoom (4)