Components

Accordion

Accordions are expandable and collapsible sections which 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

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.
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 either as standalone components or inline with text.
Loading indicator

Loading indicators help inform users that a request is being processed. Radial and linear indicators provide flexibility in design.
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 moving 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.
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

Checkbox

Chip

Classification banner

Data entity

Dialog

Empty state

Footer

Hero

Link

Loading indicator

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

Typography