Components

Accordion

Accordions are expandable and collapsible sections that are used to show and hide additional content.
Alert

Alerts display a short important message in a way that attracts attention without interrupting the current task.
Back to top

The back to top component helps people quickly return to the top of a long page.
Badge

Badges are attached to other components to provide an indication that something new is available, or that something has changed.
Breadcrumb

Breadcrumbs show someone where they are in an app’s hierarchy and provide a secondary method of navigating back to parent pages.
Button

Buttons are used to allow or encourage people to take an action.
Card (horizontal)

Horizontal cards are containers used to display structured information or link to new information.
Card

Cards are containers used to display structured information or interactive content.
Checkbox

Use checkboxes as part of a form, in dialogs or in control areas such as filters or settings.
Chip

Chips are used to filter and present data.
Classification banner

Classification banners are used to show the data classification (also known as protective marking) of an app.
Data entity

The data entity component displays a group of related data in a consistent and easy to consume way.
Data table

Use a data table to organise and display large quantities of related data.
Date input

A date input is used when gathering a specific date in a text-based format.
Date picker

A date picker is a type of drop-down control that allows people to easily view and select dates.
Dialog

Dialogs are modal windows that interrupt the user's current task to bring something important to attention.
Empty state

Use the empty state component when there is no content to display. It provides a consistent way of communicating to people what to do next.
Footer

Footers are placed at the bottom of the page and can be used for additional links not found in the main navigation.
Hero

A large banner found at the top of page used to introduce page content, provide key actions and add personality.
Link

Links can be used to navigate to different pages or sections of a page.
Loading indicator

Loading indicators help inform users that a request is being processed. Radial and linear indicators provide flexibility in design.
Multi-select

Use the multi-select component to allow users to select one or more values from a list of options.
Page header

A page header defines the top of the page content and is a consistent way to show page context, key actions and secondary navigation.
Pagination

Use the Pagination components to split large amounts of content into pages and navigate between them.
Popover menu

Use popover menus to place actions inside a menu that overlays other page content when opened.
Radio button

Radio buttons let people select a single option from a list.
Search bar

A search bar is a special input field that allows users to search for information using keywords or phrases.
Section container

Use the section container component to consistently align content within an app.
Select

Selects allow users to select one or more values from a list of options.
Side navigation

Side navigation provides an app's main navigation and is fixed on the left-hand side of the app. It includes the app's name, main navigation and optional secondary links.
Skeleton

Skeleton loading states are representations of the shape of content that help inform users that a specific type of component is loading.
Status tag

Status tags are short, clear and digestible ways to display the status of something on the page.
Stepper

A stepper is a visual representation of a user's progress through a predefined set of steps in a linear process.
Switch

Switches are used to quickly toggle an option on or off.
Tabs

Tabs let users navigate between content within the same context. Tabs organise complex layouts by separating content into multiple sections.
Text field

Text fields let users input and edit text. Text fields capture a single line of text and text areas capture multiple lines of text.
Toast

Toasts give brief, non-critical updates about events that happen in an app. Toasts are sometimes called 'snackbars'.
Toggle button

Toggle buttons provide an action capable of indicating a state. They are commonly used for turning settings either ‘on’ or ‘off’.
Tooltip

Tooltips provide helpful information when the cursor hovers over an element or when focus is applied.
Top navigation

Top navigation sits across the top of the page. It includes the app name, search bar, main navigation and secondary links.
Tree view

Use the tree view component to display hierarchical data in a tree structure.
Typography

Use the typography component for consistent styling across typographical elements.

Can’t find what you’re looking for? We are expanding the Design System and UI Kit. You can check out the roadmap for what's coming.

If you can help contribute to the system, follow our guidance about how to contribute .

Last reviewed 14 November 2023 .

Accordion

Alert

Back to top

Badge

Breadcrumb

Button

Card (horizontal)

Card

Checkbox

Chip

Classification banner

Data entity

Data table

Date input

Date picker

Dialog

Empty state

Footer

Hero

Link

Loading indicator

Multi-select

Page header

Pagination

Popover menu

Radio button

Search bar

Section container

Select

Side navigation

Skeleton

Status tag

Stepper

Switch

Tabs

Text field

Toast

Toggle button

Tooltip

Top navigation

Tree view

Typography