Visual catalog

UI Components

Recognizable interface pieces with plain-language names, aliases, and visual cues.

Start Here

Common patterns people usually recognize first.

Account settings

Save your profile changes?

Buttons make actions clear with direct labels.

Save changesCancel

Button

Try it

A button is something a person selects to make an action happen.

CTAControlconfused with Dropdown
Most relevant

Dropdown

Try it

A dropdown lets someone choose one option from a hidden list that opens on demand.

Select menuPickerconfused with Modal
A
?Explains a nearby control
...

Tooltip

Try it

A tooltip is a small note that appears near something to explain it briefly.

Hover textHelp tipconfused with Popup

Modal

Try it

A focused box that appears above the page and asks someone to complete or dismiss a task.

DialogModal dialogconfused with Popup
OverviewDetailsHistory
Overview content

One selected panel appears in this space.

Tabs

Try it

Tabs let someone switch between related views that share the same space.

Tab barTab panelconfused with Accordion

Checkbox

Try it

A checkbox lets someone turn one option on or off, often as part of a group.

Check boxTick boxconfused with Toggle
Notifications
Public profile

Toggle

Try it

A toggle switches a setting between on and off.

SwitchToggle switchconfused with Checkbox

Search Bar

Try it

A search bar is an input used to find matching content.

Search fieldSearch boxconfused with Text Input
Avery Chen

Text Input

Try it

A text input is a field where someone types short text.

Input fieldText fieldconfused with Search Bar
Email address
Password
Create account

Form

A form is a group of fields and controls used to collect and submit information.

Entry formSubmission formconfused with Text Input
NameStatusRoleJordanActiveAdminRileyPausedEditor

Table

A table organizes related information into rows and columns.

Data tableGridconfused with Card
Plan summary

Grouped content in one contained block.

Card

A card is a contained block that groups related content or actions.

Content cardTileconfused with Table

Related Patterns

Nearby concepts that help narrow the term.

Popup

Popup is an everyday word for a temporary thing that appears over or near the current page.

Pop-upOverlayconfused with Modal
Shipping details-
Expanded content appears below its heading.
Billing details+

Accordion

Try it

Expandable sections that reveal or hide content when clicked.

Expandable sectionsCollapsible panelsconfused with Tabs

Breadcrumb

A breadcrumb shows where the current page sits in a hierarchy.

Breadcrumb trailPath navigationconfused with Sidebar Navigation

Sidebar Navigation

Try it

A vertical navigation area, usually on the left, that lists major places or sections in an app.

Side navLeft navigationconfused with Tabs
123Next

Pagination

Try it

Pagination splits a long set of results into numbered pages.

Page numbersPaged resultsconfused with Infinite Scroll

Loading more...

Infinite Scroll

Try it

Infinite scroll loads more items automatically as someone reaches the end of a list.

Endless scrollContinuous feedconfused with Pagination

Uploading

Progress Indicator

Try it

A progress indicator shows that work is happening or how much has finished.

Progress barSpinnerconfused with Loading State
File saved

Toast Message

Try it

A toast message is a small temporary message that appears after an action.

ToastSnackbarconfused with Modal