Component Overview

Accordion - Display a collapsible list

Display a collapsible list

Action Button - Trigger an action

Trigger an action

Action Group - Group actions together

Group actions together

Action Menu - Display a menu of actions

Display a menu of actions

Avatar - Display a user's profile picture

Display a user's profile picture

Badge - Display a small piece of information

Display a small piece of information

Breadcrumbs - Show a navigation hierarchy

Show a navigation hierarchy

Button - Trigger an important action

Trigger an important action

Button Group - Group buttons together

Group buttons together

Calendar - Display a calendar

Display a calendar

Checkbox - Allow users to select option

Allow users to select option

Checkbox Group - Select from a group of checkboxes

Select from a group of checkboxes

Color Picker - Select a color

Select a color

Combo Box - Select an option from a list

Select an option from a list

Contextual Help - Provide additional information

Provide additional information

Dashboard - Display a collection of widgets

Display a collection of widgets

Date Field - Select a date

Select a date

Date Picker - Select a date from a calendar

Select a date from a calendar

Date Range Picker - Select a range of dates

Select a range of dates

Dialog - Display a modal dialog

Display a modal dialog

Dialog Trigger - Trigger open a dialog

Trigger open a dialog

Disclosure - Show or hide content

Show or hide content

Divider - Separate content

Separate content

Flex - Create flexible layouts

Create flexible layouts

Form - Create a form

Create a form

Fragment - Group elements together

Group elements together

Grid - Create a grid layout

Create a grid layout

Heading - Display a heading

Display a heading

HTML - Embed HTML content

Embed HTML content

Icon - Display an icon

Display an icon

Illustrated Message - Display a message with an illustration

Display a message with an illustration

Image - Display an image

Display an image

Inline Alert - Display an alert message

Display an alert message

Labeled Value - Display a labeled value

Display a labeled value

Link - Create a hyperlink

Create a hyperlink

List View - Display a list of items

Display a list of items

Logic Button - Trigger a logic action

Trigger a logic action

Markdown - Render Markdown content

Render Markdown content

Menu - Display a menu of options

Display a menu of options

Menu Trigger - Open a menu

Open a menu

Meter - Display a progress meter

Display a progress meter

Number Field - Enter a number

Enter a number

Panel - Display a panel

Display a panel

Picker - Select an item from a list

Select an item from a list

Progress Bar - Display a progress bar

Display a progress bar

Progress Circle - Display a progress circle

Display a progress circle

Radio Group - Select from a group of radio buttons

Select from a group of radio buttons

Range Calendar - Select a range of dates

Select a range of dates

Range Slider - Select a range of values

Select a range of values

Search Field - Search for an item

Search for an item

Slider - Select a value from a range

Select a value from a range

Switch - Toggle a setting

Toggle a setting

Table - Display tabular data

Display tabular data

Tabs - Display a set of tabs

Display a set of tabs

Tag Group - Group tags together

Group tags together

Text - Display text

Display text

Text Area - Enter multi-line text

Enter multi-line text

Text Field - Enter single-line text

Enter single-line text

Time Field - Select a time

Select a time

Toast - Display a temporary message

Display a temporary message

Toggle Button - Toggle a setting

Toggle a setting

View - Display a view

Display a view