Trigger an action — submit a form, open a dialog, confirm a destructive change.

A square, icon-only button with the tooltip and accessible name built in.

A pressed/unpressed control, and the segmented group built from it.

A single-line text field, in the two densities the app uses.

An input with a search icon and a clear affordance, for filtering a list.

A multi-line text field for descriptions, snippets and free-form copy.

Choose one option from a short, known list.

An independent on/off choice, on its own or in a set.

Choose exactly one option from a set that is worth showing in full.

Turn a setting on or off, applied immediately rather than on save.

Pick a number from a continuous range where the rough value matters more than the exact one.

The text that names a field and puts the browser's click target on it.

The style panel's label-beside-field row, so dense forms line up without bespoke grids.

A bordered surface grouping related content, with optional header and footer.

The builder's flush surface for a docked column of controls.

The title row at the top of a builder panel, with room for actions.

Collapse long content into labelled sections the reader opens on demand.

A scrolling region with a styled scrollbar that matches the app on every platform.

A focused, modal task lifted out of the page.

Confirm something destructive or irreversible before it happens.

A floating surface anchored to a trigger — a dense menu, a padded box, or a full header/body/footer form.

A list of actions launched from a button, with separators, shortcuts and checkable items.

A short label on hover or focus, naming a control that shows only an icon.

The ⌘K palette — a searchable, keyboard-driven list of everything you can jump to.

Switch between peer views inside one surface without navigating away.

Show where a page sits in the hierarchy, and offer the way back up.

The app's primary navigation column — brand, nav, and the account card at the foot.

One row inside a sidebar: icon, label, active state.

A page title with optional description, for settings-style full-width pages.

Rows and columns of comparable data, with a sticky header row.

A small status chip — published, draft, scheduled, failed.

An inline message about the surface it sits on, not about the whole app.

What to show when a list has nothing in it yet, and what to do about it.

A person or workspace, as an image or initials.

A placeholder in the shape of the content that is still loading.

How far along a determinate task is.

A colour value as a chip, with a checkerboard behind anything translucent.

A keyboard key, rendered as the chip used in tooltips and the command palette.

A rule separating groups of content, horizontally or vertically.

The account row at the foot of a sidebar: avatar, name, secondary line.