Sourced directory
Thirty sourced concepts, grouped by behavioral differences rather than appearance.
30 concepts shown
Tooltip
A short, noninteractive hint that appears when a control receives pointer hover or keyboard focus.
Popover
A small contextual surface opened deliberately to show supporting content or controls without making the whole page modal.
Dropdown menu
A compact list of actions that opens from a button and supports menu-style keyboard navigation.
Modal dialog
A focused surface for a contained task that makes the rest of the page temporarily inactive.
Alert dialog
A modal dialog that interrupts a consequential action and requires an explicit confirm or cancel decision.
Lightbox
A modal viewer that enlarges one media item and may let the user move through a related collection.
Drawer
A temporary panel that slides from a viewport edge, overlays the page, and closes when its focused task is finished.
Bottom sheet
A mobile-oriented surface attached to the bottom edge that can open to stable heights and may support dragging.
Sidebar
A persistent region beside primary content that participates in page layout and usually contains navigation or supporting tools.
Select
A closed form control that opens a predefined list and stores one selected value without free text entry.
Combobox
An editable field linked to a popup list that filters or suggests options while the user types.
Listbox
An always-visible list of named options where keyboard focus and selection are managed as one composite control.
Checkbox
An independent form choice that can be checked, unchecked, or sometimes indeterminate before a form is submitted.
Radio group
A named set of mutually exclusive choices where selecting one option clears the previous selection.
Switch
An on or off control for a setting whose change takes effect immediately.
Tabs
A set of labels that switches between related content panels while keeping one panel visible at a time.
Segmented control
A compact group of adjacent options that selects one value and usually applies the change immediately.
Accordion
A vertical set of headings that reveals or hides each associated content section.
Toast
A brief nonblocking message that appears after an event and may disappear after enough reading time.
Inline alert
A persistent message placed next to the content or task it explains, with urgency chosen from the actual update.
Banner
A prominent, persistent message spanning a page region to communicate a condition that affects broad page use.
Spinner
A compact animated indicator for work whose completion amount is unknown, paired with a meaningful busy status.
Progress bar
A visual and semantic indicator that shows a current completion value within a known range.
Skeleton
Decorative placeholder shapes that reserve the approximate layout of content while that content is loading.
Button
A named control that performs an action in the current interface when activated.
Link
A named connection to another destination that preserves standard browser navigation behavior.
Icon button
A compact button represented visually by an icon but still given its own stable accessible action name.
Text field
A labeled single-line control for entering or editing one textual value.
Textarea
A labeled control for entering or editing free-form text across multiple lines.
Search field
A text input inside a named search form that submits a query to find matching content.