Layout

The frame of an app and the parts of its pages.

AL

Dashboard

App ShellThe frame of an app's pages: a sidebar, a top bar and the page.

Page HeaderThe top of a page: what it is, where it stands, what can be done here.

Billing details

Where invoices go, and when they're due

Company: Globex Corporation
Payment terms: Net 30

SectionA titled part of a page, with its own description and actions.

Signed in as Ada Lovelace.

Last active 2 minutes ago.

SeparatorA line between things, optionally with a word in it.

SidebarThe column beside the pages: the app's name, its main links, what belongs at the bottom.

INV-2041

Globex · Due 3 Oct · €12,400

Split PaneTwo panes and a handle to share the room between them.

Design Research Writing

Stack, Cluster and GridThe space between components: one under another, in a row, or in columns.

ToolbarA row of controls acting on one thing; one Tab stop, arrow keys between them.

AL

Top BarThe bar over the pages: search at the start, the app's actions and the account at the end.

Actions

The things a screen can be told to do, and the controls that ask.

ButtonAn action, in the weight it deserves, with a spinner while it works.

Payments arrive within two days. See how payouts work or change your bank details.

LinkText that goes somewhere, in a sentence or on its own.

Day Week Month

Segmented ControlOne value from a few, as joined segments.

Split ButtonThe usual action one click away, its variations in a menu beside it.

RemoteFull-timePart-timeContract

Toggle ChipOptions turned on and off as chips: quick filters, interests.

Forms

Everything that takes a value from someone, and how a form is put together.

Email me receipts

Weekly summary

CheckboxA choice that is on or off, alone or among independent options.

Brand color

Color PickerAny color, from an area, sliders, fields or swatches.

ComboboxOne or several options from a list you can search, shown as tags.

Due

Date familyA date, a range, a week or a day, typed or picked from a calendar.

Work email

We'll send a link to confirm it.

Enter an email like name@company.com

FieldA control with its label, description and messages.

Notify me about

Deployments

Incidents

FieldsetA group of related choices or fields under a legend.

Form LayoutHow a form is arranged: spacing, sections, fields side by side.

Name

Address

Form RepeaterA list of rows of fields people add to and remove.

Input OTPA one-time code, typed or pasted, in cells.

Company (optional)

As it should appear to customers.

LabelWhat a control is called, with its required or optional mark, a hint and a description.

Number InputA count with buttons to step it down and up.

PasswordA password box with show and hide, a strength meter and rules.

Billing

Monthly

Yearly

RadioOne choice from a short list.

Price

Range SliderA from–to range picked on one track.

Rich TextA textarea for formatted text whose value is clean HTML.

Save BarSave and Discard in reach while editing, and whether there's anything to save.

SelectOne option from a list: the browser's select, styled.

Opacity

SliderA value picked from a range.

SwatchesOne color from a few, as colored circles.

Two-step sign-in

SwitchA setting that is on or off and takes effect right away.

Text InputA one-line box, with icons, affixes and actions inside it.

TextareaText over several lines, growing with what's typed.

TimeA time of day, typed or stepped, a cell per part.

Data display

Records, tables and the small pieces that describe them.

Invoice numbering

New invoices start at INV-2042.

Payment terms

Net 30 for every customer.

AccordionParts of a page that open one by one, under rows that name them.

AL GH3

AvatarA person, team or bot as a photo, initials or an icon.

ALGH

ATKJ4+

Avatar GroupSeveral avatars in a row; point at one to bring it forward.

Starter plan

Up to 5 people

Everything a small team needs to send and track invoices.

CardA framed box: one thing, or one part of a page, set apart.

invoice.paid.json

{
  "type": "invoice.paid",
  "amount": 12400
}

Code BlockCode people read or copy, highlighted.

Invoices
Select all rows	Customer	Amount	Status
Select Globex	Globex	$12,400.00	Paid
Select Initech	Initech	$3,210.50	Waiting
Select Umbrella	Umbrella	$880.00	Overdue

Data TableA table people search, filter, sort, select, edit and page through.

Invoice: INV-2041
Customer: Globex Corporation
Due: Nov 1, 2026

Description ListFacts about one thing, as terms and their values.

No users yet

People you invite will show up here.

Empty StateWhat a view shows with no content, and what to do next.

Filter BarNarrows a list: a search field, facets and quick chips.

Press ⌘ K to search

KbdA keyboard key or shortcut, in text, a tooltip or a button.

Revenue this month

$48,210

Up 12% from last month

StatOne number that matters, and how it moved.

Sent Paid Overdue

Status IndicatorWhere something stands, in a word and a dot.

Team
Name	Role	Status
Rosa Okafor	Design lead	Active
Dev Patel	Engineer	Away
Mia Chen	Finance	Invited

TableRows and columns of data, read across and down.

PaidDue soonOverdueDraftBeta

TagA short label in a chip: a status, a category, a person.

Navigation

Getting around: between pages, within a page, through a long list.

BreadcrumbThe trail of pages above this one, each a link back up.

Command PaletteA search box for the whole app: pages and actions by name.

MenubarA row of menus for apps with many commands.

Nav ListThe links of a sidebar: the main way around an app.

PaginationMoving through a long list a page at a time.

Overview of INV-2041.

TabsThe parts of one page or record, one shown at a time.

Overlays

What opens over the page for a moment: a task, a panel, a menu, a hint.

DialogA task over the page, finished or dismissed before going on.

DrawerA dialog at the side of the window, for longer work beside the page.

MenuActions that open from a button or a right-click.

PopoverA panel a button opens over the page, for a short task beside it.

TooltipA short text shown while a button or link is hovered or focused.

Feedback

What the app says back: news, warnings, and that it's still working.

This invoice is overdue

It was due on 3 October. Globex hasn't paid yet.

AlertA message in the page that stays while it's true.

BannerA message about the whole app, across the top of every page.

SkeletonShapes that stand in for content while it loads.

Loading invoices…

SpinnerSomething is working, and how long isn't known.

Invoice saved

INV-2041 is up to date.

ToastShort news about what just happened, in a corner, for a few seconds.

Patterns

Whole screens made only of the components above.

List → Detail → EditFind a record in a list, open it, change it, save. Master–DetailGoing through many records: the list on one side, the one you're on beside it. Settings PageAn app's settings: their parts beside the one that's open, saved together. Sign-in PageGetting into an app, and back in when something goes wrong.

Components