Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.


An avatar is a visual representation of a user or entity.

Avatar group

An avatar group displays a number of avatars grouped together in a stack or grid.


A badge is a visual indicator for numeric values such as tallies and scores.


A banner displays a prominent message at the top of the screen.


Breadcrumbs are a navigation system used to show a user's location in a site or app.


A button triggers an event or action. They let users know what will happen next.


A checkbox is an input control that allows a user to select one or more options from a number of choices.


Code highlights short strings of code snippets inline with body text.

Dropdown menu

A dropdown menu displays a list of actions or options to a user.


A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often dis ...

Inline dialog

An inline dialog is a pop-up container for small amounts of information. It can also contain controls.

Inline message

An inline message lets users know when important information is available or when an action is required.


A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.


A lozenge is a visual indicator used to highlight an item's status for quick recognition.

Modal dialog

A modal dialog displays content that requires user interaction, in a layer above the page.

Page header

A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs b ...


Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Progress indicator

A progress indicator shows the user where they are along the steps of a journey.

Progress tracker

A progress tracker displays the steps and progress through a journey.


A radio input allows people to select only one option from a number of choices. Radio is generally displayed i ...

Section message

A section message is used to alert users to a particular section of the screen.


Select allows users to make a single selection or multiple selections from a list of options.


A spinner is an animated spinning icon that lets users know content is being loaded.


Tabs are used to organize content by grouping similar information on the same page.


A tag labels UI objects for quick recognition and navigation.

Tag group

A tag group controls the layout and alignment for a collection of tags.

Text area

A text area lets users enter long form text which spans over multiple lines.

Text field

A text field is an input that allows a user to write or edit text.


A toggle is used to view or switch between enabled or disabled states.


A tooltip is a floating, non-actionable label used to explain a user interface element or feature.