Design reference index · 1/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Hover Lift Card
A surface rises on hover or focus and casts a deeper shadow.
Hover Opacity Fade
Opacity changes in response to hover, focus, or tap.
Hover Reveal Panel
Hover and focus reveal supporting content; tapping toggles it.
Animated Link Underline
An underline expands from the left on hover and focus.
Pointer Spotlight Surface
A radial light follows the local pointer position.
Pointer Reactive Border Glow
The border glow shifts direction with pointer position.
Magnetic Button
A button moves a bounded distance toward the pointer and returns on exit.
Eased Pointer Follower
A circular marker follows with eased delay; the system cursor remains visible.
Pointer Trail Dots
Short-lived dots trace the pointer and are removed after their lifetime.
Pointer Layer Parallax
Flat layers move at different rates to express relative depth.
Click Origin Ripple
A ripple starts at the click position, or the center for keyboard activation.
Click Confetti Burst
Clicking emits colored pieces that are removed after animation.
Click Pop Feedback
Each activation plays one overshoot-and-settle pulse.
Radial Click Burst
Clicking spreads particles at even angular intervals.
Pressed Button Depth
Pressing lowers the button and contracts its bottom shadow.
Elastic Spring Return
A state change moves with overshoot and returns on the next activation.
Animated Switch Control
Pointer and keyboard input keep aria-checked and the thumb synchronized.
Animated Disclosure Panel
Collapsible content stays synchronized with aria-expanded.
Action Toast Feedback
An action displays a status message and announces it to assistive technology.
Interactive Progress Fill
Synthetic progress toggles between 25% and 100% with an accessible value.
Drag and Snap Control
Horizontal dragging snaps to the nearest stop; arrow keys are supported.
Swipe Reveal Action
A horizontal swipe reveals an action without deleting data.
WebGL Pointer Tilt Card
A solid card rotates with the pointer using a Three.js mesh, camera, and lights.
WebGL Flip Card
Activation flips a solid card with distinct front and back materials.
WebGL Orbit Interaction
Drag or arrow keys orbit the camera; zoom buttons change its distance.
WebGL Solid Cube
Inspect a rotating 3D cube with lit faces and edges.
WebGL Torus Knot
Inspect a torus-knot mesh and its metallic lighting response.
WebGL Particle Field
Rotate a 3D point cloud and change its spread on activation.
WebGL Layer Depth Stack
Rotate five solid plates separated along the z axis and expand them on activation.
WebGL Wireframe Toggle
Switch a polyhedron between wireframe and solid rendering.
WebGL Pointer Lighting
The pointer moves a point light to change illumination across a sphere.
WebGL Geometry Switcher
Cycle through five mesh geometries and dispose of the previous geometry.
Spinner
Uses repeated rotation to indicate work whose completion fraction is unknown.
Skeleton Screen
Displays placeholder blocks matching the upcoming content layout.
Progress Bar
A determinate example that represents known task completion through a filled linear track.
Progress Ring
Shows the known completion fraction of one task as a filled arc on a circular track.
Circular Progress Indicator
A family of circular task-status indicators: determinate when completion is known and indeterminate otherwise.
Linear Progress Indicator
A family of linear status indicators covering determinate and indeterminate progress.
Determinate Loading
Shows progress when completed work can be measured against a known total.
Indeterminate Loading
Indicates activity when the completion fraction is not known.
Stepper / Step Indicator
An indicator of the current, completed, and remaining steps in a multi-step process.
Loading Button
A button that displays progress within itself after an action starts.
Inline Loader
A loading indicator confined to a particular area rather than the entire page.
Full-screen Loader
A loading indicator that temporarily blocks use of the entire screen.
Shimmer
A repeating highlight that sweeps across an element surface.
Pulse Loading
A loading animation with periodically changing opacity or scale.
Blur-up Image
A low-resolution or blurred image shown first, then replaced with the full-quality image.
Lazy Loading
A strategy that loads content or resources only when they are needed.
Progressive Loading
A strategy that displays parts of the content in order of priority.
Prefetching
Requesting data in advance because it is likely to be needed next.
Optimistic UI
Updating the interface before server confirmation, then rolling back if the operation fails.
Pessimistic UI
Committing a visible state change only after receiving the server response.
Streaming Text
Displaying text incrementally as new text data arrives.
Infinite Scroll Loading
Loading the next items in a list as the user reaches a relevant scroll position.
Retry State
A state that lets the user retry a loading operation after a failure.
Toast
A brief nonblocking status message.
Snackbar
A brief nonmodal message with an optional contextual action.
Banner
A wide announcement placed at the top of a screen or within the content area.
Inline Notification
A notification placed within the relevant work area to retain context.
Alert
A message calling attention to a risk, error, warning, or other important information.
Success Message
Positive feedback confirming that saving, sending, or processing has finished.
Warning Message
A message about a potential loss or a situation requiring caution.
Error Message
A message explaining a failure and possible ways to resolve it.
Info Message
A message providing contextual or status information rather than an outcome.
Notification Center
A dedicated area for collecting, retaining, and reviewing notifications.
Notification Badge
A badge indicating new notifications or an unread count.
Badge
A small marker attached to an item to show brief information, status, or a count.
Status Dot
A small dot representing a state such as online, offline, or warning.
Status Chip
A short status label displayed inside a small capsule or chip.
Message Bar
A horizontal message spanning an area to communicate an important state.
Callout
A persistent emphasis on important context or supporting information within content.
Flag Notification
A non-blocking feedback message displayed near the edge of the screen.
Actionable Notification
A notification containing an action, such as navigation, approval, or recovery.
Live Region Announcement
Accessible feedback that automatically announces interface changes to assistive technology.
Haptic Feedback
Vibration or other tactile signals communicating an action or state.
Modal Dialog
A window that blocks background interaction to focus attention on the current task.
Non-modal Dialog
A window that permits interaction with the background while it remains open.
Alert Dialog
A dialog used for an important message or decision.
Confirmation Dialog
A window that confirms intent before an action such as deletion or submission.
Bottom Sheet
A panel for options, information, or actions that appears from the bottom of the screen.