Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Components Overview

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.

illustration representing Accordion
Accordion
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
illustration representing Badge
Badge
A badge is a visual indicator for numeric values such as tallies and scores.
illustration representing Button
Button
Buttons are an effective way to draw attention to an action for users to take. They should be used when an action needs user input.
illustration representing Card
Card
Cards are containers that group related content and information together.
illustration representing Content
Content
Used to add space around an element.
illustration representing Data Grid
Data Grid
Grids are used when displaying a data table.
illustration representing Date Picker
Date Picker
Date & time pickers are used to present an interface that makes it easy for users to select dates and times.
illustration representing Forms
Forms
Form components like inputs, select and radio buttons are used to capture user inputs.
illustration representing Icons
Icons
Icons are symbols used to represent words or actions visually.
illustration representing List
List
Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more.
illustration representing Navigation
Navigation
A collection of components which let you compose an application's navigation.
illustration representing Notifications
Notifications
A collection of components that communicate information to users.
illustration representing Overlays
Overlays
Overlay components appears on top of the current page and can be used to display addition information to the user.
illustration representing Pagination
Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
illustration representing Spinner
Spinner
A spinner is an animated spinning icon that lets users know content is being loaded.
illustration representing Tab
Tab
Tabs are used as a way of organizing groups of similar content on a page without separating the categories onto their own separate page.
illustration representing Toggle
Toggle
Toggles give users the ability to choose between two states.
Open source