Basics
Buttons, fields, menus, and empty and error screens. 39 parts.
39 parts
Controls, 11 parts
- ButtonA rounded button with a text label. It comes in five styles and three sizes, and can hold an icon.
- IconButtonA round button that shows only an icon. It always has a name, and it can show an on or off state.
- BadgeA small label that shows a status, a count or a category.
- AvatarA round picture that shows who wrote a message: a letter for a person, a dark circle with a lime spark for the assistant.
- AvatarStackA few overlapping avatars, a plus, then how many more people there are.
- SegmentedControlA row of joined buttons where you pick one option, using clicks or arrow keys.
- KbdA small key label, such as Tab or Esc, that shows which key to press.
- PopoverA small panel that opens beside a button, for menus, pickers and short explanations.
- CollapsibleA heading with an arrow that shows or hides extra content when pressed.
- SectionLabelA tiny capital-letter label that names a group in a list, with room for a small action.
- AttentionDotA small amber dot that means a person has to do something.
Forms, 11 parts
- FieldWraps any form control with a visible label, hint text and an error message, and wires them together.
- TextFieldA single-line text box with room for an icon or unit, two sizes and an invalid state.
- NumberFieldA number box with minus and plus buttons, keyboard stepping, limits and an optional unit.
- SelectA styled native dropdown with a drawn chevron, a placeholder and an invalid state.
- CheckboxA tick box with a visible label and hint. It can show a partly selected state.
- RadioGroupA set of radio buttons for picking exactly one option, with a visible group name.
- SliderA single-thumb slider for picking a number in a range, with an optional value readout.
- SwitchAn on-off switch with a name for screen readers. It can be disabled and can carry a hidden explanation.
- DatePickerAn inline month calendar for recent dates, with day buttons, quick Today and Yesterday, and the choice repeated in words.
- ComboboxA search box with suggestions that is never a closed list: whatever is typed can be used.
- InlineEditA labelled value that reads as plain text and turns into an input in place when you press Edit.
Navigation and overlays, 8 parts
- TabsA row of tabs that switch between views, with arrow-key movement and optional panels.
- MenuA button that opens a list of actions, with full keyboard support.
- TooltipA short text label that appears on hover and on keyboard focus.
- SplitterA draggable bar between two panes that people can also move with the keyboard.
- DialogA modal window on the native dialog element, with a title, a body that scrolls and a footer for buttons.
- ToastA short message that appears at the edge of the screen and goes away by itself. Includes the provider and the useToast hook.
- CommandPaletteA search box and a list of actions in a modal window. Type to narrow the list, then press Enter.
- SheetA panel that slides over the page from the bottom, right or left edge, with a drag handle on bottom sheets.
Empty and error, 9 parts
- EmptyStateA message for an area with nothing in it: a drawing, a title that says why, one line, and one button.
- IllustrationA small drawing for empty, error, permission and success screens, in dark lines with one green touch.
- SceneIllustrationAn animated scene for empty, waiting, trust and success moments, told with objects and one lime shape.
- PictogramA one-color line icon, larger than a button icon, for small areas and lists of features.
- ErrorStateA red message for a problem that can be fixed, with an optional Try again button.
- RateLimitNoticeAn amber message that says when a usage limit resets, with an optional Upgrade button.
- CalloutA message box inside the page, with a color for its mood, an optional title and an optional button.
- SkeletonA shimmering gray block that holds the place of content while it loads.
- SpinnerA small spinning ring that shows something is loading.