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