Components
Avatar
Avatar item
Avatar presence
Avatar skeleton
Avatar status
Avatar group
Badge
Banner
Breadcrumbs
Button
Checkbox
Code
Dropdown menu
Flag
Inline dialog
Inline message
Logo
Lozenge
Modal dialog
Pagination
Progress indicator
Progress tracker
Radio
Section message
Select
Spinner
Tabs
Tag
Text field
Toggle
Tooltip

Components

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.

Avatar

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.

Badge

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

Banner

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

Breadcrumbs

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

Button

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

Checkbox

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

Code

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.

Flag

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

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.

Logo

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

Lozenge

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.

Pagination

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.

Radio

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

Select gives users the ability to make a single selection, or multiple selections from a number of options.

Spinner

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

Tabs

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

Tag

A tag labels UI objects for quick recognition and navigation.

Text field

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

Toggle

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

Tooltip

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