Display
Badge
Badges bring the user's attention to something.
Data Table
Data Table is used to display data in a table.
Disclosure
Disclosure controls the visibility of content in context.
Empty State
Let users know when there is nothing to show.
Icon
Icons provide additional context to elements on the page.
Notification
Notifications notify the user with the status of an action.
Progress Bar
Shows how far through a process or task something is.
Progress Stepper
Shows a user's progress through a multi-step form, and what's coming next.
Summary List
Summary List provides a summary of data, generally from a form.
Timeline
Timeline shows a series of content in chronological order
Tooltip
Give supplementary non-critical context and provide term definitions
Inputs and actions
Checkbox
Checkboxes allow users to enable and disable options.
Chip
Chips help users make selections, filter content, or trigger actions
Combobox Field
Combo box is a searchable multi select or single select field with the ability to nest options into sub-menus.
CTA Button
CTA Buttons perform an action on the page or submit a form.
CTA Link
CTA Links direct users to a different page to complete an action.
Currency Field
Currency Fields allow users to input an amount of money.
Date Field
Date Fields allow users to input an exact date.
Datepicker Field
Datepicker Fields allow users to input a date using a calendar popup or free text.
Form
Forms are used to capture user input.
Monthpicker Field
Monthpicker Fields allow users to input a month and year using a calendar popup or free text.
Radio
Radios are used to choose between multiple options.
Select Field
Select Fields allow users to choose from a list of options.
Text Field
Text Fields allow users to input text and numbers.
Textarea Field
Textarea allows users to provide multiple lines of text.
Other
Layout
Various layout components that help you build responsive and flexible layouts.
Skeleton Loading
Gives user an idea of what content is loading.
Subcomponents
Subcomponents are utilities used to create bespoke components.
Visually Hidden
Visually Hidden is used to give context to screen reader users.
Surface
Accordion
Accordions control the visibility of related sections of content.
Card
Cards are used to define sections of content.
Modal
Modals display content in front of the main page.
Page
A standardised page layout including waymarkers and page-level actions.
Tabs
Tabs allows the user to switch between content sections.
Typography
Heading
Headings create a semantic outline of the content.
List
List is used for ordered and unordered lists.
Text
Text is used for inline text elements.
Text Link
Text Link is to link to pages or anchor points.