Components

Accordion

A list of toggles that reveal or hide associated content.

Alert

Displays a brief message without interrupting a user’s task.

App Footer

Supplementary information and links for the application.

App Header

Used as a global and utility navigation within an application.

App Side Nav

A side navigation menu that provides access to subpages within a product or application.

Application State

An informational element that displays the current state of the application.

Badge

Concise, non-interactive labels that represent metadata.

Badge Count

A non-interactive numeric label.

Breadcrumb

A secondary navigation that shows the user’s current location.

Button

An interactive element that initiates an action.

Button Set

Provides consistent layout and spacing for a set of buttons.

Card

A block container that provides styling for elevation, border, and background.

Code Block

A container for formatting chunks of code with syntax highlighting.

Code Editor

A code editor with syntax highlighting, change history, and keyboard navigation.

Copy Button

A button that copies the attached or associated text upon interaction.

Copy Snippet

A button that copies the text content of the button itself.

Dropdown

Hide/Show a list of actions or options with a toggle button.

Filter Bar

A composition of HDS components to support filtering.

Flyout

Displays additional details and information about an item or object, overlaid on the main page content.

Layout

Components used to create consistent structure and spacing for form elements.

Primitives

Elements used to compose form fields.

Checkbox

A form element that allows users to select one or more items from a group of items.

File Input

A form input that enables users to upload files.

Key Value Inputs

Rows of related inputs that can be individually added & deleted.

Masked Input

A form input that obfuscates sensitive information.

Radio

A form element that allows users to select a single item from group of items.

Radio Card

A type of radio input represented as a card.

Select

A form element that allows users to choose one option from a list.

Super Select

Enhanced selection component that enables users to search and select items from a list.

Text Input

A form element that provides users with a way to read, input, or edit data.

Textarea

A form input that accepts multi-line text.

Toggle

A form element that allows users to select between two mutually exclusive states.

Icon

Used to display an icon.

Icon Tile

Used to display an icon in a tile-like object.

Inline Link

A link used within a body of text.

Standalone Link

A link used in isolation and not as a part of surrounding body text.

Modal

A pop-up window used to request information, confirm a decision, or provide additional context.

Page Header

Displays the title of the page, metadata, and page-level actions.

Pagination

Used to let users navigate through content broken down into pages.

Reveal

A toggle that reveals additional content to the user when triggered.

Rich Tooltip

Provides additional structured informational content for a UI element.

Segmented Group

Combines one or more input fields and actions.

Separator

Creates visual breaks between different sections of content

Stepper Indicator

Helps the user maintain context and directionality when advancing through a multi-step flow or feature.

Stepper List

Lists sequential steps for a user to complete.

Stepper Nav

Navigates users through a sequential progress flow.

Table

Used to display organized, two-dimensional tabular data.

Advanced Table

Used to display complex, structured tabular data with advanced features.

Tabs

Allows users to move among different views within the same context.

Tag

Used to indicate an object’s categorization.

Text

A component that applies predefined typographic styles to its content.

Time

Displays dates and times in a consistent format.

Toast

Used to display messages that are the result of a user’s actions.

Tooltip

Provides additional information or context for a UI element.

AppFrame

A layout component used as top-level “frame“ for the application.

Flex

A layout-only component for the organization of content based on the CSS Flexbox model.

Grid

A layout-only component for the organization of content based on the CSS grid model.

PowerSelect

Style overrides for the ember-power-select addon.

Composite

An internal utility component used to manage 1D and 2D keyboard navigation and roving focus for a collection of items.

DialogPrimitive

The foundational blocks of dialog components.

DisclosurePrimitive

An internal utility component that provides show/hide functionality.

Dismiss Button

An internal utility component used to provide "dismiss" functionality in other components.

Interactive

An internal utility component used to provide interactivity to other components.

PopoverPrimitive

An internal utility component that provides popover, anchoring, and collision detection functionalities.