Design reference index · 2/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Modal Bottom Sheet
A bottom sheet that blocks interaction with background content.
Persistent Bottom Sheet
A bottom panel that remains available alongside the background content.
Drawer
A navigation or content panel that opens from the side of the screen.
Side Sheet
A details or editing panel displayed beside the current screen.
Popover
A small panel containing information, inputs, or actions near a related element.
Tooltip
A short explanation that appears on hover, keyboard focus, or a similar trigger.
Toggletip
A small help panel explicitly opened or closed by an action such as clicking.
Context Menu
A menu of actions for the current item, opened by right-clicking or long-pressing.
Dropdown Menu
A list of commands that expands from a selected button.
Action Sheet
A mobile sheet grouping related commands.
Lightbox
An enlarged image, video, or other media displayed above the page background.
Scrim / Backdrop
A translucent layer that dims the background behind a dialog.
Overlay
A general term for a temporary interface layer placed over the original screen.
Command Palette
A panel for finding and executing application commands through search.
Primary Button
A button emphasizing the most important action on a screen.
Secondary Button
A secondary-priority button that supports the primary action.
Tertiary Button
A supplementary action button with low visual emphasis.
Ghost Button
A button using text or an icon without a filled background.
Outlined Button
A button style that defines its boundary with an outline.
Text Button
An action presented as text with minimal or no button background and border.
Icon Button
An interactive button whose main content is an icon.
Floating Action Button (FAB)
A floating button emphasizing a key action, such as creating an item.
Split Button
A button separating a default action from a menu of additional options.
Menu Button
A button that opens a list of commands.
Button Group
A group of related actions arranged next to one another.
Segmented Button
Related options presented as connected segments of a button control.
Toggle Button
A button that retains its pressed or unpressed state to switch a setting or mode.
Destructive Button
A button for deletion or another action that is difficult to reverse.
Disabled Button
A button that cannot be activated, for example because its requirements are unmet.
Sticky CTA
A call-to-action button that stays at a screen edge while the user scrolls.
Overflow Button
A button that reveals additional commands not shown directly on screen.
Back-to-top Button
A button that returns the user to the top of a long page.
Text Field
A control for entering one line of text or numbers.
Text Area
A field for entering longer, multi-line text.
Password Field
An input field that conceals secret characters.
Search Field
An input control designed for entering a search query.
Label
Text that identifies the meaning of an input field.
Placeholder
Example text shown inside an empty input field.
Helper Text
Text explaining input rules, expected formats, or supporting information.
Inline Error
A specific error explanation displayed near the affected field.
Field Validation
Checking whether an individual input value satisfies its rules.
Real-time Validation
Checking input requirements at appropriate moments while the user enters data.
Form-level Validation
Validating multiple input values together when a form is submitted.
Error Summary
A consolidated list of form errors, often displayed at the top of the form.
Required Field Indicator
An asterisk or text identifying an input as required.
Character Counter
An indicator of entered characters or the remaining character allowance.
Input Mask
A pattern that constrains or guides entry of values such as dates or phone numbers.
Input Prefix / Suffix
A fixed unit or symbol, such as a currency sign or percent sign, beside an input value.
Autocomplete
Suggesting or completing an expected value while the user types.
Autosuggest
Suggesting queries or items related to the entered text.
OTP Input
An input for a fixed-length code, such as a one-time verification code.
Number Input
A numeric input that may also provide increment and decrement controls.
Date Picker
An interface for choosing a date, commonly from a calendar.
Time Picker
An input tool for selecting a time.
Date Range Picker
A control for selecting a start date and an end date together.
File Uploader
An input component for selecting files and managing upload progress.
Drag-and-drop Upload Zone
An area where files can be added by dragging and dropping them.
Rich Text Editor
An editor for text that includes formatting.
Form Wizard
A flow that guides the user through a complex form in multiple steps.
Checkbox
A control for selecting multiple items independently.
Radio Button
A control for choosing exactly one option from a group.
Switch / Toggle Switch
A control that immediately switches a setting on or off.
Select
An input for choosing one of a predefined set of options.
Combobox
A control combining text entry or selection with a popup list of options.
Multi-select
A selection method that permits multiple values at once.
Chip
A small capsule-shaped element representing a selection, input, filter, or action.
Filter Chip
A chip for quickly enabling or disabling a filter condition.
Input Chip
A chip representing an individual entered value, such as a keyword or recipient.
Choice Chip
A chip for choosing a value from a short set of options.
Tag
A concise label describing a content category or attribute.
Slider
A draggable control for adjusting a numeric value within a continuous range.
Range Slider
A control for specifying both a minimum and a maximum value.
Rating Control
A control for entering an evaluation, such as a star rating.
Color Picker
A control for selecting a color from a palette or spectrum.
Tree Select
A control for selecting items within a hierarchy.
Transfer List
An interface for moving items between available and selected lists.
Dual Listbox
A control for selecting and moving items between two listboxes.
Selection Toolbar
A toolbar offering bulk actions, such as deletion or export, for selected items.
Top App Bar
The top area containing a title, back navigation, and important commands.
Navigation Bar
An area providing the principal destinations of an app or website.