Product UI
Shell & navigation
Primitives
- AccessibilitystableA field's error message and a polite live region for status updates.
- BadgestableA small toned label for a status or count.
- ButtonstableThe app's buttons, as buttons or links, with a disabled reason and icon-only phone labels.
- Disabled ReasonstableSays why a control is disabled or read-only, as a tooltip or inline text.
- Empty StatestableThe placeholder for an empty list or page, with one action.
- Icon ButtonstableAn icon-only button with a required name, tooltip and 24 px or larger target.
- Person NamestableAnother person's name with their email beside it, muted, full address on hover.
- Scroll FadestableA sideways-scrolling row that fades on the side with more.
- Tag ChipstableA Tag as a colored chip, a row of chips or a dot; the color comes from the name.
- TooltipstableThe app's tooltip, on hover and keyboard focus, placed to fit the viewport.
Navigation
Lists & boards
- Filter DropdownstableA toolbar filter: a button that opens a checklist of values with counts.
- Filter PanelbetaA generic panel of filter groups and toggles, with the active filters as chips.
- KanbanstableThe Jira-style Board: the page scrolls, equal lanes, sticky headers, drag between lanes.
- List MorestableLoads the next page of a list on scroll or click, with row skeletons.
- List RowstableA list's rows, with selection, a menu and a row count.
- List ToolbarstableA list's sticky toolbar: search, quick filters and sort in one row.
- Selection BarstableThe bar of bulk actions for selected rows, with the select tick.
Overlays
- Bottom SheetstableA sheet that slides up from the bottom and dismisses with a drag.
- DialogstableA modal with title, body and actions, and a confirm dialog.
- MenustableAn action menu from a trigger or right-click, with disabled reasons.
- PopoverstableA panel anchored to a trigger, placed to fit the viewport.
Feedback & saving
Forms & pickers
Resources
Platform
Screens
- Application HubbetaThe Application hub: title and New, a StickyToolbar with search, quick filters, Sort and List | Board, then rows or the Kanban.
- Sign InbetaA sign-in page: a centered card with the brand, an email field, Continue and Continue with Google.
- Students ListbetaA staff Students list: title and Invite, a toolbar with search, Stage filter and Sort, selectable rows and the SelectionBar.