Components

Buttons

Badges & status

Forms

Choices & ranges

Cards

Alerts

Tabs

Tables

Empty, loading & identity

Lists of things

Item is one thing in a list as a row: what stands for it, its name, a line about it, and what can be done with it at the end. On the page each row is a card that leads on; inside a surface the rows are bare, with a hairline where the list is long. A list in a panel scrolls in a ScrollArea, under the system's own thin scrollbar. Rows that are sorted or filtered are a DataTable instead.

Searching a list

Command is a list that is searched by typing and walked with the arrow keys. As a picker it holds more options than a menu can (a project to move something to, the values of a filter), with a check on what is chosen. As a palette, in a dialog, it goes to a place or runs an action by name.

Dates

Calendar picks a day or a range. A day is a round button; the chosen one is filled, a range is its two ends filled with the days between on a band, and today sits on the quiet fill. It has no surface of its own: it goes in a Popover or on a Card. The week starts on Monday.

Split button

ButtonGroup joins buttons that are one control into one pill: the thing itself, and beside it a chevron for the other ways of doing it. The parts are told apart by a hairline of the page between them, not an outline. For choosing one of several, use a ToggleGroup.

Confirming

AlertDialog asks before something that cannot be taken back. It is the Dialog's surface without a close button, and a press outside does not dismiss it. The title is the question in the words of the thing, the answers say what each does, and the dialog stays open while a slow action runs. For anything that can be undone, do it and offer Undo in a toast.

Toasts

A toast says what just happened and leaves by itself. It is always the popover surface; what kind of news it is shows in its icon alone. One line, a second when there is something to add, at most one action. Use it to confirm what the person just did, with Undo where it can be taken back. An error the person has to act on is said where the problem is, not in a toast.

Overlays

Dialogs, menus, select popups and tooltips render in a portal on the page root, so they follow the product chosen at the top of the page rather than the panel they open from.