Components

A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.

A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.

Enable users to trigger actions from a list in a popover when space is limited.

A graphical representation of a user or entity - usually a photo or initials

A static label that highlights an item's status.

A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.

A utility component for working with spacing.

A clickable element which communicates that users can trigger an action.

A layout component used to group multiple related actions a user can take.

Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.

A styled container that groups related content and actions.

A form element that enables users to make a binary choice (checked/unchecked).

A form element that enables users to select multiple values from a list of options.

Enable users to select a single value from a list of choices that support more complex content than regular radio buttons.

A utility component that detects a click outside of the component it's wrapping

A button that allow users to quickly and easily copy content to their clipboard.

A static label that indicates the quantity of items.

An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.

A means of inputting a date - either in a textfield or using a date picker interface.

A form element used to select a single or a range of dates.

A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.

Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress.

Used to help users learn about new or unfamiliar interface features.

A wrapper for related form fields. Used to separate form content with a label and spacing.

Utility component that lets users upload files by dragging and dropping the files into an area on a page, or activating a button.

Utility component that allow users to select a file(s) from the file system.

A component used to apply category-specific filters for a dataset.

Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters.

A composable and responsive layout component for filters

Different UI elements require different focus styles. That's why we expose three different focus styles. This provides our customers who navigate by keyboard with an optimal experience.

Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.

An icon button with a question mark that reveals help information on click or tap.

Enables users to control the visibility of other UI elements.

A utility component for controlling horizontal layouts.

A form element that enables users to enter a single line of text.

Text that navigates the user from one page to another.

A set of text objects in a bulleted or numbered format.

A versatile element that can display information in a clear and organized manner.

A listbox provides a way to select or reorder options in a predefined list and a selected option can then be made to perform a single action.

A component used as a placeholder when content is not yet available or to indicate that an action is being processed.

A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.

Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.

A collection of components which let you compose a page in our web application.

Used to collect phone numbers with international dial codes. It contains a dropdown which allows the user to choose from a list of countries and dial codes.

A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.

A component used to represent the completion of a task or to visualize different states that are relevant to the user.

Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

A form element that enables users to select a single value from a list of options.

An input that allow users to find content by entering a search term.

A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.

A form element that enables users to select a single or multiple values from a list of options.

Replaces content with a placeholder of the same shape to indicate a loading state.

A form control for choosing a value within a preset range of values.

A component used as a placeholder when content is not yet available or to indicate that an action is being processed.

A utility component for controlling vertical layouts.

An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart.

A control used to switch between two states - often on or off.

A component for displaying large amounts of data in rows and columns.

Tabs are labeled controls that allow users to switch between multiple views within a page.

A static label that highlights an item's category or attribute.

A primitive component that can be used to create all kinds of text styles.

A form element that enables users to enter text on multiple lines.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

A wrapper component used to visually hide content that is necessary to provide appropriate context to users utilising assistive technology.

A non-interactive representation of a user’s progress through a series of discrete steps, with the Steps component as its interactive counterpart.