Design-system coverage

A button that triggers a host capability.

Covers Buttons, Extended FABs, Floating action buttons (FABs), Icon buttons, Button, Link, FloatButton, CompoundButton, Icon link, ActionIcon, Anchor, CopyButton, Icon Button, IconButton and 6 more

The set of actions for a surface or section; the renderer places it where that platform expects.

Covers Button groups, Toolbars, Toolbar, MenuList, Button Group, Page actions, ActionBar, ButtonGroup, ActionButtonGroup, ActionGroup

Secondary actions behind one control: an overflow menu, dropdown, split button or context menu.

Covers FAB menu, Split buttons, Menus, Menu, Menu buttons, Overflow menu, Combo button, Dropdown, MenuButton, SplitButton, MenuGrid, Context Menu, Dropdown Menu, Menubar and 7 more

Asks the user to confirm a consequential or destructive action, showing what will happen.

Covers Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog

A single text-like value: text, number, email, phone, currency, search or long text.

Covers Search, Text fields, Number input, Text input, Text area, AutoComplete, Input, InputNumber, Mentions, Searchbox, Spin button, Textarea, Input Group, Form control and 30 more

Pick one or several options from a known set. The renderer chooses the control.

Covers Segmented buttons, Checkbox, Chips, Radio button, Dropdown, Multiselect, Select, Combo box, Radio, Transfer, Segmented, Combobox, Radio group, Tag picker and 30 more

An on/off setting.

Covers Switch, Toggle, ToggleButton, Switches, Setting toggle, ToggleSwitch

A date, time, date-time or date range.

Covers Date pickers, Time pickers, Date picker, Time picker, DatePicker, TimePicker, Calendar (compat), DatePicker (compat), TimePicker (compat), Calendar, DateInput, DatePickerInput, DateTimePicker, InlineDateTimePicker and 13 more

A number, or a range between two numbers, within known bounds.

Covers Sliders, Slider, Range, AngleSlider, RangeSlider, Range slider

Collects inputs and submits them together.

Covers Form, Contextual save bar, Save bar, ControlGroup, Addresses, Equality information, Check a service is suitable, Question pages

Choose or drop files to upload.

Covers File uploader, Upload, File input, FileButton, FileInput, Dropzone, Drop zone, FileTrigger, File upload

Pick a colour or a swatch.

Covers ColorPicker, SwatchPicker, Color input, AlphaSlider, ColorInput, HueSlider, Color picker, Color field, ColorArea, ColorField, ColorSlider, ColorSwatchPicker, ColorWheel, Color loupe

A one-time code or PIN, typed into boxes.

Covers Input OTP, PinInput, Confirm a phone number, Confirm an email address, Pin Input

Give or show a score out of N.

Covers Rate, Rating, RatingDisplay

A run of text.

Covers List, Typography, Text, Blockquote, ColorSwatch, Highlight, Mark, NumberFormatter, TimeValue, Em, Quote, Strong, Caption, Text style and 11 more

A key figure with a label, and optionally its change.

Covers Statistic, RollingNumber, Big number, Stat

Label/value pairs describing one thing (a summary, a receipt, a review step).

Covers Descriptions, DataList, Data List, Description list, LabeledValue, Summary list, Check answers, Contact a department or service team

Tabular data: many items sharing the same attributes.

Covers Data table, Pagination, Structured list, Table, DataGrid, Tables, ActionBar, Bulk actions, Index filters, Index table, Select all actions, DataTable, TableView, Action Bar

A list of items from host data, each rendered with the same template.

Covers Carousel, Lists, Contained list, Calendar, List, Timeline, CarouselNav, List group, Schedule, Resource list, DragAndDrop, ListView, SimpleListView, CardView

A visual summary of data, always paired with a text summary.

Covers Chart, AreaChart, BarChart, BarsList, BubbleChart, CandlestickChart, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, MatrixChart, PieChart, RadarChart and 14 more

An image, video, audio clip, gallery or QR code supplied by the host.

Covers Image, QRCode, Images, Figures, BackgroundImage, Thumbnail, Video thumbnail, QR Code

Feedback about state: info, success, warning, error, empty or loading.

Covers Notification, Empty, Alert, Result, Message bar, Alerts, EmptyState, Callout, Banner, Empty state, Exception list, Blankslate, InlineMessage, IllustratedMessage and 11 more

A short label, status or count attached to something else.

Covers Badges, Tag, Badge, CounterBadge, InteractionTag, TagGroup, Indicator, Pill, Clickable chip, Chip, CounterLabel, Label, LabelGroup, StateLabel and 4 more

A person, team or organisation: picture, name and details.

Covers Avatar, Avatar group, Persona, PresenceBadge, AvatarStack, CircleBadge, GitHubAvatar, AvatarGroup

A hierarchy people expand, browse and pick from.

Covers Tree view, Cascader, TreeSelect, Tree, TreeView, NestedListView

How far along something is, or an amount within bounds: bars, rings, meters, gauges.

Covers Progress indicators, Progress bar, Progress, RingProgress, SemiCircleProgress, BulletChart, GaugeChart, ProgressBar, Meter, ProgressCircle, Progress Circle

Code or preformatted text, copyable.

Covers Code snippet, Code, CodeHighlight, BranchName, Code Block

A titled region of the surface that groups related content under a heading.

Covers Fieldset, Title, Heading, Card, Legacy card, Page, Display text, Subheading, Section, PageHeader, Start using a service

Visually groups closely related items without a heading (proximity).

One self-contained entity (an account, an order, a place), optionally actionable as a whole.

Covers Cards, Tile, Card, Attachment, Item, Stretched link, Account connection, Callout card, Media card, Resource item, Link Overlay

Progressive disclosure: secondary content hidden behind a toggle.

Covers Accordion, Collapse, Collapsible, Spoiler, Details, Disclosure

Switch between alternative views of the same subject (tabs).

Covers Tabs, Content switcher, Tablist, Navs & tabs, Legacy tabs, SegmentedControl, UnderlinePanels, MarkdownEditorViewSwitch

A task split into ordered steps with visible progress.

Covers Progress indicator, Steps, Questionnaire, Stepper, StepList, Task list, Complete multiple tasks, Step by step navigation

Compare a few options across the same attributes, and choose one.

Filters for a list of results, with the result count.

Covers Filters, Legacy filters, Filter, ListFilterButton

The product's main navigation.

Covers Navigation bar, Navigation drawer, Navigation rail, Breadcrumb, UI shell left panel, Anchor, Menu, Nav, Sidebar, Scrollspy, Breadcrumbs, NavLink, TableOfContents, Tab Nav and 7 more

Content opened over the current view: a dialog, drawer, sheet or popover.

Covers Bottom sheets, Side sheets, Dialogs, Modal, Popover, Drawer, Dialog, Hover Card, Sheet, Offcanvas, Popovers, FloatingWindow, HoverCard, App window and 2 more

Surfaces, text, borders, actions, selection, status and data colours, in every mode

Covers Color, Colors, Palette, Theme

The type scale: display, headings, body, captions and numerals

Covers Typography, Type scale, Text styles, Fonts

Inset and stack spacing, tight to spacious

Covers Spacing, Space, Sizing

Control heights and the minimum touch target

Covers Sizing, Touch targets, Density

Corner radii for controls, cards and overlays

Covers Border radius, Corner radius, Radii

Border widths

Covers Borders, Strokes

The focus ring

Covers Focus ring, Focus states

The longest comfortable line of text

Covers Line length

Disabled and overlay opacities

Covers Opacity

Shadows for raised and overlay surfaces

Covers Elevation, Shadows

Durations and easings

Covers Motion, Animation, Easing, Duration

Put a few options side by side on the same attributes, mark what is better, recommend when there's a clear fit, and let the user choose.

Before something that is hard or impossible to undo, say exactly what will happen and ask for an explicit, specific confirmation.

Covers Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog, Confirm a phone number, Confirm an email address, Confirmation pages

Narrow a large set with a few filters placed before the results, and explain empty results.

Covers Search, Data table, Pagination, Searchbox, Data Table, Filters, Index table, Legacy filters, Search field, DataTable and 6 more

Collect information in small, ordered chunks: one form when short, Steps when long or dependent.

Covers Progress indicator, Steps, Questionnaire, Stepper, StepList, Task list, Complete multiple tasks, Question pages, Step by step navigation

Before committing, show everything that will be submitted in a scannable summary, then one clear submit action.

Covers Summary list, Check answers

For everyday actions that can be reversed, do them straight away and offer Undo, instead of asking 'Are you sure?' every time.

Covers Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog, Confirm a phone number, Confirm an email address, Confirmation pages

Skeletons, spinners and progress while data arrives

Covers Loading indicator, Inline loading, Loading, Skeleton states, Skeleton, Spin, Spinner, Placeholders, Spinners, Loader and 11 more

Labels, help text, required marks and error text around every input

Covers Field, Label, Floating labels, Validation, Inline error, FormControl, Field label, Help text, Error message

Toasts and snackbars after an action, with Undo for reversible ones

Covers Snackbar, Message, Notification, Toast, Sonner, Toasts, Notifications system

Tooltips and help on hover or focus

Covers Tooltips, Toggletip, Tooltip, Definition tooltip, Info label, ContextualHelp, Toggle Tip

Keyboard shortcut hints

Covers Kbd, Keyboard key, KeybindingHint, Keyboard

Scroll regions and their scrollbars

Covers Scroll Area, ScrollArea, Scroller, Scrollable

Icons, from the design system's own set

Covers Icon, ThemeIcon, Accessible Icon

Closing overlays and dismissing banners

Covers Close button, CloseButton, Close Button

Chart scaffolding: axes, legends, tooltips

Covers Legend, Axis, Scroll-zoom bar

Truncation and overflow menus for what doesn't fit

Covers Overflow, OverflowList

Error summaries at the top of a form

Covers Error summary, Recover from validation errors

Marking generated content as generated

Covers AI label

Sticky bars and back-to-top

Covers Affix

Live-region announcements for screen readers

Covers AriaLiveAnnouncer

Opening and closing navigation on small screens

Covers Burger

Focus management in dialogs

Covers FocusTrap

Lightboxes for media

Covers Lightbox

Truncating long text

Covers Truncate