Components

Button

A button triggers an action or event and lets users know what to expect next.

Checkbox

Checkboxes let users select zero, one or more options from a number of choices.

Dropdown

Dropdowns show a list of choices for users to fill forms, filter, or sort content.

Form

A form combines inputs to allow users to enter data.

Input group

Input groups combine several components, such as buttons and labels, to an input.

Input row

The input row groups related input fields side by side in a single row.

Lookup

Enter a value to find and confirm related details quickly.

Multi-field input

Multi-field inputs combine two or more fields under one label for easier, faster data entry.

Nested inputs

Show extra fields only when a user’s answer makes them needed.

Number input

A number input allows users to enter numeric values, often with step controls.

Radio

Use radio buttons for selecting one option from a group of mutually exclusive choices.

Response button

Response buttons let users quickly select from predefined options.

Select

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

Slider

Sliders let users adjust a value by dragging a handle along a horizontal track.

Switch

A switch allows users to toggle between enabled and disabled states.

Text area

A text area allows users to enter long form text across multiple lines.

Text input

A text input allows a user to enter or edit text.

Avatar

Show users with images or initials, alone or in in a set.

Icon block

Icon blocks are contained icon next to content to help draw attention and add meaning.

Alert

An alert notifies users of important information or actions needed.

Modal

Modals focus attention on a task by appearing in a window above the main page content.

Toast

Toasts provide brief, non-intrusive notifications that appear temporarily.

Breadcrumb

Breadcrumbs show where a page sits in the site and let users go back with ease.

Link

A link directs people to a new spot within the product or to another website.

Page navigation

Quick links to move between related pages.

Tabs

Tabs group related content and let users switch between content within the same context.

Menu

A menu appears when its trigger is activated, revealing a list of options.

Menu button

Menu, combo, and overflow buttons open menus that display a list of interactive options.

Tooltip

Tooltips show extra helpful info on hover or focus, adding clarity without breaking the flow.

Progress bar

A progress bar shows how much is done and how much is left to finish.

Tag

Tags are small visual elements used to provide additional information or visual cues.

Accordion

An accordion allows users to expand or collapse content for better organization.

Card

A card presents many kinds of content in a structured and compact format.

Collapse

A collapse lets users show or hide extra content without leaving the page.

Heading attachment

A heading attachment allows a secondary element to appear inline with the heading.

Key-value pair

Key-value pairs present labels and values together to make information easy to scan.

List

Lists stack related content vertically; each item can start with a numeral or bullet.

Summary-meta

Groups an icon with short text to show key info clearly and quickly.

Table

Text block

A text block displays text, with the ability to include header and icon elements.

Versa-tile

A stackable card for individual item details and contextual actions.