Components
Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.
All categories
Accordion
NewA 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.
Action banner
LabA versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
Action Menu
NewEnable users to trigger actions from a list in a popover when space is limited.
Avatar
A graphical representation of a user or entity - usually a photo or initials
Badge
NewA static label that highlights an item's status.
Banner
NewA prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
Box
A utility component for working with spacing and borders.
Button
A clickable element which communicates that users can trigger an action.
Button group
A layout component used to group multiple related actions a user can take.
Callout
Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
Card
NewA styled container that groups related content and actions.
Checkbox
Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
Choice Tiles
LabEnable users to select a single value from a list of choices that support more complex content than regular radio buttons.
No image available...
Click Outside
LabA utility component that detects a click outside of the component it's wrapping
Copyable
LabA button that allow users to quickly and easily copy content to their clipboard.
Count
NewA static label that indicates the quantity of items.
Currency input
An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
Date input
LabA means of inputting a date - either in a textfield or using a date picker interface.
Date picker
A form element used to select a single or a range of dates.
No image available...
Drawer
NewA 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.
Empty state
LabUsed 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.
Feature tip
LabUsed to help users learn about new or unfamiliar interface features.
Fieldset
LabA wrapper for related form fields. Used to separate form content with a label and spacing.
No image available...
File drop
LabUtility component that lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
No image available...
File Input
LabUtility component that allow users to select a file(s) from the file system.
Filter menu
A component used to apply category-specific filters for a dataset.
Filter results
Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters.
Filters layout
LabA composable and responsive layout component for filters
Focus
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
DraftForm control displays a labelled input and, optionally, associated validation text and/or hint text.
Help popover
DraftAn icon button with a question mark that reveals help information on click or tap.
Icon button
NewEnables users to control the visibility of other UI elements.
Inline
A utility component for controlling horizontal layouts.
Input
An element used to create interactive controls for web-based forms in order to accept data from the user.
Link
Text that navigates the user from one page to another.
List
A set of text objects in a bulleted or numbered format.
List item
LabA versatile element that can display information in a clear and organized manner.
Listbox
LabA 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.
Loading
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Modal
A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
Modal Split
NewModal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.
Page
LabA collection of components which let you compose a page in our web application.
Phone input
LabUsed 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.
Popover
A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.
Progress bar
A component used to represent the completion of a task or to visualize different states that are relevant to the user.
Promotional Banner
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.
Radio group
A form element that allow users to select an single option from a list of at least two options.
Search
LabAn input that allow users to find content by entering a search term.
Segmented control
LabA hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
Select
A form component used to select data from a list.
Skeleton
DraftReplaces content with a placeholder of the same shape to indicate a loading state.
Slider
LabA form control for choosing a value within a preset range of values.
Spinner
A component used as a placeholder when content is not yet available or to indicate that an action is being processed.
Stack
A utility component for controlling vertical layouts.
Steps
LabA representation of a user’s progress through a series of discrete steps.
Switch
NewA control used to switch between two states - often on or off.
Table
LabA component for displaying large amounts of data in rows and columns.
Tabs
Tabs are labeled controls that allow users to switch between multiple views within a page.
Tag
NewA static label that highlights an item's category or attribute.
Text
A primitive component that can be used to create all kinds of text styles.
Textarea
A form element that allows users to enter text on multiple lines.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
No image available...
Visually Hidden
NewA wrapper component used to visually hide content that is necessary to provide appropriate context to users utilising assistive technology.
Wizard
LabA setup process where the user is guided through a series of steps to achieve a goal.