Components

Overview

Components are interactive building blocks of our design system. Each component was created to meet a specific UI and accessibility need. Components should be used harmoniously together in the same space to create more intuitive user experiences.

Accordion

Toggle the visibility of sections of content

Alert

Button

Allows users to perform an action when triggered

Card

Gives a preview of information in a small layout

Chip

Clipboard Copy

Code Block

Helper Text

Hint

Provides inline contextual help or information to users

Icon

Jump Links

Label Group

Groups multiple labels with overflow, category, and close support.

Label

Allows users to display meta data in a stylized form.

Displays information or helps a user focus on a task

Panel

Toggle the visibility of helpful or contextual information.

Progress Stepper

Search Input

Allows users to search through a list for specific search terms

Select

Table

Tabs

Text Area

Text Input

Tile

Toggle the visibility of helpful or contextual information.

Avatar

Displays a user's avatar image with optional placeholder

Back To Top

Shortcut to navigate to the top of a lengthy content page.

Background Image

Places a decorative image in the background of a page.

Badge

Annotates content with a small count or status indicator

Provides a full-width banner for brief, non-dismissible messages.

Spinner

Indicates that an action is in progress

Switch

Toggle control for on/off settings