Components

Actions, links styled as buttons, severities and loading.

A segmented control: one choice, or several, from a row.

A dropdown of actions, opened from any trigger.

An on/off switch for a setting that applies at once.

A text field that suggests as you type.

A date grid: a day, a range or a time, inline.

Checked, unchecked or indeterminate, alone or in a list.

A date field with a calendar in a popup.

Choose files by picker or by drag and drop.

Text input with a label, add-ons, a clear button and errors.

Pick several options, shown as chips.

Exactly one of a few options, all visible.

A score out of a few stars, to give or to show.

Pick one option from a dropdown list.

A value or a range along a track.

Multi-line text that can grow with its content.

A person as a picture, initials or an icon — alone or in a group.

A count or a dot pinned to the corner of anything.

A compact item to remove, filter by or pick.

A rule between sections, with or without a label.

136 built-in outline icons, and any SVG of your own.

Page through a long list, with an optional page size.

How far a task has got, or that it is running.

Press feedback for anything you can click.

The shape of content that is still loading.

Sortable, paginated, selectable — and virtualized when it is long.

A short status label in a severity colour.

Stacked sections that open one or several at a time.

Where this page sits, and the way back up.

A surface for one thing — linkable as a whole.

Show and hide one region; the primitive under the accordion.

A titled region of a page, collapsible if it needs to be.

A scroll area with a themed, auto-hiding scrollbar.

Where a user is in a multi-step task.

Switch between views without leaving the page.

A persistent message in the flow of the page.

A modal window, opened from a template or a service.

What a region says when it has nothing to show.

Something is loading, for an unknown length of time.

A short message that comes and goes on its own.

A hint on hover or focus.