Design reference index · 4/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Treemap
Encodes hierarchical values as nested rectangle areas.
Funnel Chart
Compares counts across sequential stages using widths.
Waterfall Chart
Accumulates positive and negative changes from a starting value to an ending value.
Gauge
Positions a value on a scale or within target bands.
Data Tooltip
Shows values and units for a focused or hovered chart mark.
Drill-down
Navigates from an aggregate to a finer level in the same hierarchy.
Cross-filtering
Uses a selection in one view to filter related views.
Global Search
Search across the entire product's content and resources.
Local Search
Search limited to the current screen, list, folder, or another local scope.
Search Autocomplete
Suggestions for completed or related search queries while typing.
Typeahead
A pattern that immediately narrows candidate results as the user types.
Recent Searches
A list of queries the user has searched for previously.
Search History
A searchable or reusable record of previous searches.
Faceted Search
Narrowing results by combining attributes such as brand, price, and rating.
Filter Panel
A panel grouping conditions applied to search results or a list.
Filter Drawer
Search filters provided in a separate side panel.
Sort Menu
A menu for choosing a result order, such as newest, lowest price, or most popular.
Search Suggestions
Related keywords or target items recommended within a search interface.
Search Highlight
Visual emphasis on matching text within search results.
No Results State
A state explaining that no items match the current search conditions.
Saved Filter
A stored set of frequently used search conditions that can be reapplied.
Filter Preset
A predefined bundle of filter conditions that can be applied quickly.
Query Builder
A control for constructing complex conditions from fields, operators, and values.
Onboarding Flow
A flow introducing first-time users to the product's core functions.
Product Tour
A sequence that introduces important features by visiting relevant screens.
Coach Mark
An annotation pointing to a specific control and explaining how to use it.
Spotlight
An emphasis effect that keeps a target interface area bright while dimming its surroundings.
Guided Tour
A sequence that teaches features by having the user follow ordered steps.
Walkthrough
A step-by-step demonstration or guide through a task scenario.
Interactive Tutorial
A tutorial that teaches through actual clicking and input.
Feature Discovery
Contextual exposure of features users may not yet know about.
Feature Announcement
An explanation of a newly released feature or a change.
What's New
A collection of changes and new features shown after an update.
Contextual Help
Explanatory information provided where the current task requires it.
Empty-state Onboarding
Guidance toward a first action on an initial screen with no data.
Checklist Onboarding
A checklist of tasks required to complete setup.
Progressive Disclosure
Showing information needed now while revealing advanced options later.
Hover State
The state in which the pointer is positioned over an element.
Focus State
The state identifying the element currently designated to receive keyboard or other input.
Pressed State
The state of a button while being pressed, or the retained pressed state of a toggle button.
Active State
A general term for the currently active item, or the CSS state during activation.
Selected State
The state identifying the currently selected list item, tab, or other option.
Drag and Drop
An interaction in which an item is grabbed, moved, and released at a destination.
Swipe Gesture
A finger-sliding gesture that moves content or triggers an action.
Long Press
Holding a touch for a period of time to invoke an additional action.
Double Tap
Touching an element twice in quick succession.
Pinch to Zoom
Changing the distance between two fingers to zoom in or out.
Pull to Refresh
Pulling a list downward to request fresh data.
Swipe to Dismiss
Swiping a notification, card, or panel away to dismiss it.
Swipe Actions
Swiping a list item to expose actions such as Delete or Archive.
Reorderable List
A list whose item order can be changed by dragging.
Sort by Dragging
Specifying an order through drag-and-drop interactions.
Keyboard Shortcut
A key combination that executes a command quickly.
Contextual Actions
Commands relevant to the currently selected object or context.
Microinteraction
A small, focused interaction and its feedback for a single task or state change.
Hover Reveal
Revealing otherwise hidden secondary actions when the pointer hovers.
Undo / Redo
Reversing a previous change or reapplying a reversed change.
Confirmation Pattern
A flow that reconfirms intent before executing a risky command.
Debounce
Waiting for a pause in repeated input, then processing only the final action.
Throttle
Limiting how frequently an action can run during rapid repeated input.
Transition
The process of changing from one state to another.
Entrance Animation
Motion used when an element appears.
Exit Animation
Motion used when an element disappears.
Fade In / Out
Changing opacity to make an element appear or disappear.
Slide In / Out
Sliding an element into or out of view.
Scale Animation
Changing an element's scale over time.
Spring Animation
Movement based on a spring model with properties such as mass, stiffness, and damping.
Easing
Controlling the rate of value change across an animation's progress.
Ease-in / Ease-out
Changing the animation's speed near its beginning or end.
Staggered Animation
Starting individual elements at slightly offset times.
Shared Element Transition
A transition connecting the same object across screens so its position and size appear continuous.
Morphing
Continuously transforming one shape into another.
Parallax
Moving different elements at different speeds to create a sense of depth.
Scroll-triggered Animation
Starting an animation when a specified scroll position is reached.
Lottie Animation
Displaying a vector-based JSON animation within an interface.
Rive Animation
Real-time interactive animation connected to a state machine.
Blur Effect
Blurring an element to influence visual focus.
Backdrop Blur
Blurring content behind a translucent foreground element.
Glassmorphism
A glass-like visual treatment using translucency, background blur, and highlights.
Neumorphism
A visual style using low-contrast shadows to suggest raised or recessed surfaces.