Components
Every control and view: when to use it, when not to, and the rules it follows.
04.01Actions
Button groups
Related buttons joined into one control, such as zoom in and out, or previous and next.
Buttons
Capsule buttons in roles, from the one prominent action of a view to quiet, plain and destructive ones.
Icon buttons
Round buttons with only a symbol, for frequent actions in toolbars, rows and headers.
Keyboard shortcuts
Keys shown the way each platform writes them: ⌘K on a Mac, Ctrl+K elsewhere.
Menus
Lists of commands that open from a button: the More menu, or a pull-down of actions.
Segmented controls
Two to five mutually exclusive segments that switch a view or a filter.
Toggles
Buttons that stay pressed: a filter or mode that is on or off.
04.02Inputs
Autocomplete
A text field that suggests matches while people type, and still accepts what they typed.
Calendars
An inline month view for picking a day or a range, where the calendar itself is the content.
Checkboxes
Turn an item in a list or form on or off, or pick several items.
Colour wells
Preset colours, the person’s own colours and a custom editor; the well only reports the choice.
Comboboxes
Type to filter a long list, then pick one value.
Date pickers
A date field people can type in or pick from a calendar, for one day or a range.
Field add-ons
A field with something attached: a prefix, a unit, a symbol or a small button.
Form sections
A form laid out as titled, rounded groups of fields, in two columns when there is room.
Pop-up buttons
A field that shows the current choice and opens a menu of options.
Radio groups
One choice from a short, visible list.
Search fields
A capsule field that filters as you type, with a search symbol and a clear button.
Sliders
Pick a value in a continuous range by dragging, with the exact value shown beside it.
Steppers
Minus and plus buttons around a small number, for quantities that change by one.
Switches
Turn a setting on or off, taking effect immediately.
Text areas
Multi-line fields for notes, addresses and remarks.
Text fields
A rounded field with a label above it, optional help below, and an error that says how to fix it.
Time pickers
A time field with hours, minutes and, where the clock uses it, AM and PM, plus Now.
04.03Presentation
Alerts
A small centred card that asks before something important or destructive happens.
Command palette
A search-first sheet, opened with ⌘K or Ctrl+K, that jumps to any place, record or action.
Hover cards
A preview of a linked record that appears while hovering over its name.
Popovers
A small Glass panel attached to a control, for a few related controls or a short explanation.
Sheets
A focused task in an opaque card over a dimmed, lightly blurred backdrop: add, edit, pick, review.
Side sheets
A panel that slides in from an edge, for details or settings about the screen behind.
Toasts
A brief, non-blocking message at the bottom of the screen, with an optional action such as Undo.
Tooltips
A short label that appears after a pause on hover or focus.
04.04Navigation
Breadcrumbs
The path to the current screen in a deep hierarchy, each step a link back.
Pagers
A quiet footer under a long table: the visible range, rows per page, and previous and next.
Sidebars
A floating Glass column of a product’s areas, for moving between them.
Tabs
Switch between sections of one record or one sheet without leaving it.
Toolbars
A Glass bar along the top with navigation, open views and global controls.
04.05Content
Accordions
A stack of sections that open one or several at a time, for long, scannable content.
Avatars
A person’s photo, or their initials when there is none.
Badges and chips
Small capsule labels for a status or a count.
Cards and panels
Opaque rounded containers that group related content on a page.
Disclosures
A single section that shows or hides its details, such as advanced options.
Empty states
What goes here, why it is empty, and the one action that fills it.
Grouped lists
Rounded groups of rows with an optional symbol, text, value and accessory, separated by inset hairlines.
Separators
A hairline between groups of content or menu items.
Stat tiles
A large number with a label, such as today’s total or the people online.
Tables
A rounded card with a sticky heading row, rows and hairlines, filling the page’s leftover height.
04.06Status
Activity indicators
A small Glass panel with a spinner and a title over a dimmed screen, for short blocking work.
Inline messages
A message inside the page about the page: offline, invalid data, something to fix here.
Progress bars
How much of a known amount of work is done: imports, syncs, downloads.
Skeletons
Gray shapes in the layout of content that is still loading.
Spinners
Something is working and the time is unknown: small, in place, beside what it affects.