UI Components

A button performs an action and leaves you on the same page.

A link takes someone somewhere else: another page, another site, or another point on this one.

A menu is a list of actions revealed by a trigger, like the three dots on a file row.

A split button pairs one default action with a menu of close alternatives.

A context menu is a list of actions opened from the object they affect, usually with a right click or a long press.

A toolbar is a horizontal strip of controls that act on the content beside or below it.

A text field is a single-line input for short, free-form text.

A textarea is a multi-line input for text that runs longer than one line: a comment, an address, a bug report.

A select lets someone choose one option from a list that stays hidden until they open it.

A combobox is a text input that filters a list of options as you type, then lets you choose one.

A checkbox lets someone choose any number of options from a set, including none of them.

A radio group shows every option at once and lets someone pick exactly one.

A switch turns something on or off and applies the change immediately.

A date picker opens a calendar so someone can choose a date by tapping it instead of typing it.

A search field lets someone type to find rows in a set they do not have memorised.

A slider sets a value by dragging a handle along a range.

A number field is a text input for counts and measures, usually with step buttons on either side.

A tag input collects many short labels in one field, each shown as a removable chip.

A file upload lets someone choose a file from their device or drop one onto a target zone.

A time picker sets hours and minutes without choosing a calendar day.

A one-time code input splits a short numeric code across several boxes so each digit is visible and easy to check.

A rating control captures how good something was on a fixed scale, usually stars.

A segmented control shows two to five options on one line and lets someone pick exactly one.

Tabs show panels of related content one at a time, switched by clicking a label instead of loading a new page.

An accordion collapses each section behind its own heading, so a long page can be scanned by its headings before any of it is read.

A card groups related content into one visible unit, so a person can scan several of them at once and compare.

A table lays records out in rows and columns so values in the same column can be compared straight down the page.

Pagination splits a long list into pages someone moves through one at a time.

An avatar shows a person in a circle, with initials when the photo is missing.

A breadcrumb shows where you are inside a hierarchy, with links back to each ancestor.

A sidebar is an app's main navigation, pinned to one edge of every screen.

A list is a vertical stack of rows, each row one object.

A tree shows nested items with folders that expand and files that select.

A stepper shows progress through a short sequence of screens in a fixed order.

A carousel shows a few related panels in a row and moves between them one at a time.

A timeline lists events on a vertical axis in time order.

Filters slice an existing list by criteria someone toggles on and off.

A modal is a window that sits above the page and blocks everything behind it until the task inside is finished or cancelled.

A drawer slides in from the edge of the screen and keeps the page behind it visible, dimmed but still there.

A popover is floating content anchored to a trigger, and the one thing that separates it from a tooltip is that someone can click inside it.

A tooltip is a short, non-interactive label that appears when someone hovers or focuses a control.

A hover card opens a small panel when someone pauses on a trigger, and that panel can hold more than a label.

A command palette is a searchable overlay for jumping to pages and running actions without hunting through menus.

An action sheet slides up from the bottom of the screen with a short list of choices.

A toast is a message that appears to confirm something just happened, then leaves on its own within a few seconds.

A banner is a message that stays on the page until the condition behind it changes, like an unverified email or a service outage.

A badge is a status the system sets, like Active or Draft.

A skeleton mimics the shape of content that hasn't arrived yet.

An empty state is the screen when there is nothing to show.

A progress bar shows how far through a task someone is when the total is known.