Components

A badge component for displaying labels with semantic intent.

Lets users take actions and make choices with a single click or tap.

A visually contained surface that groups related content and actions.

Checkboxes allow the user to select one or more items from a set.

Groups all parts of the collapsible.

A card that can be expanded and collapsed. When collapsed, only the header is visible.

ColorIndicator is a React component that renders a specific color in a circle. It’s often used to summarize a collection of used colors in a child component.

Allows the user to pick a color from a list of pre-defined color entries.

ComboboxControl is an enhanced version of a SelectControl with the addition of being able to search for options using a search input.

Renders a widget based on the WAI-ARIA composite role, which provides a single tab stop on the page and arrow key navigation through the focusable descendants.

Disabled is a component which disables descendant tabbable elements and prevents pointer interaction.

DropZone is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

The root container for an empty state component.

FormFileUpload allows users to select files from their local device.

FormToggle switches a single setting on or off.

A FormTokenField is a field similar to the tags and categories fields in the interim editor chrome, or the “to” field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.

GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There’s either a linear or a radial type available.

Renders a raw icon without any initial styling or wrappers.

InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace TextControl.

KeyboardShortcuts is a component which handles keyboard sequences during the lifetime of the rendering element.

A styled anchor element with support for semantic color tones and an unstyled escape hatch.

MenuGroup wraps a series of related MenuItem components into a common section.

MenuItem is a component which renders a button intended to be used in combination with the DropdownMenu component.

MenuItemsChoice functions similarly to a set of MenuItems, but allows the user to select one option from a set of multiple choices.

Modals give users information and choices related to a task they’re trying to accomplish. They can contain critical information, require decisions, or involve multiple tasks.

Notice is a component used to communicate feedback to the user.

Panel expands and collapses multiple sections of content.

A simple horizontal progress bar component.

Render a user interface to select the user type using radio inputs.

RangeControls are used to make selections from a range of incremental values.

This component provides an isolated environment for arbitrary HTML via iframes.

SearchControl components let users display a search control.

SelectControl allows users to select from a single or multiple option menu. It functions as a wrapper around the browser’s native <select> element.

Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.

A Snackbar displays a succinct message that is cleared out after a small delay.

Spinner is a component used to notify users that their action is being processed.

A flexible layout component using CSS Flexbox for consistent spacing and alignment. Built on design tokens for predictable spacing values.

A text component for rendering content with predefined typographic variants. Built on design tokens for consistent typography across the UI.

TextareaControls are TextControls that allow for multiple lines of text, and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field.

TextControl components let users enter and edit text.

Highlights occurrences of a given string within another string of text. Wraps each match with a <mark> tag which provides browser default styling.

ToggleControl is used to generate a toggle user interface.

TreeGrid is used to create a tree hierarchy. It is not a visually styled component, but instead helps with adding keyboard navigation and roving tab index behaviors to tree grid structures.

Generates a hierarchical select input.

UnitControl allows the user to set a numeric quantity as well as a unit (e.g. px).

Visually hides content while keeping it accessible to screen readers. Useful when providing context that’s only meaningful to assistive technology.