Components
Actions
Button
Buttons allow users to take actions that will trigger a response
Icon Button
[DEPRECATED] Icon button is a button without text that allows users to take actions.
Data
Chip
Chip is used to categorise or classify similar items, usually via a textual label with an icon
Code Decorator
A styled inline code element for highlighting technical terms, commands, and snippets within text.
Data Table
Tables are used to display sets of data that are easy to scan
Tag
Tags are used to categorize, classify or filter corresponding object, or to communicate user-generated labeling.
Tag Group
Tag Group is used when presenting multiple tags, especially in a scenario where space is limited.
Line Chart
Line Chart connects data points with lines from left to right to visualize relationships or trends in data.
Sparkline Chart
Sparkline Chart is a small line chart with no axes or coordinates to show the general shape of a dataset.
Form Elements
Checkbox
Checkboxes allow the user to select one or more options in a form
Date Picker
Date Picker is used to select a specific date and time.
Number Field
Used to enter numbers that’s no longer than one line.
Search Input
Search Input allows users to perform in-page content searches
Radio Group
Radio Group allows the user to select one option from an available list
Textarea
Used to enter free form text that spans over multiple lines of text.
Text Field
Used to enter free-form text that’s no longer than one line.
Time Picker
Used to select a specific time from a list of predefined options or type in a chosen time.
Select
Used to choose multiple options from a list of choices.
MultiSelect
Used to choose multiple options from a predefined list of options.
Images & Icons
Avatar
Avatar is a representation of a user or entity (such as Projects, Tenants, or Spaces)
Avatar Stack
Avatar Stack displays multiple Avatars next to each other.
Layout
Advanced Filter Panel
Advanced Filter Panel lets users narrow down large result sets.
Carousel
Carousel is used to display a customisable number of slides of content
Divider
Divider is a vertical or horizontal, thin line that groups content in lists and layouts
Empty State: Inline Onboarding
Introduces and helps users get started with a product feature they haven't used yet (in a specific content area).
Empty State: No Results
Informs users that no results were found in their query.
Empty State: Onboarding
Introduces and helps users get started with a product feature they haven't used yet.
Header Primary
The header for a Level 1 or Level 2 Page Layout
Header Secondary
A highly customizable header for Level 2 Inner Page Layout
Sortable List
Sortable List helps users to reorder the sequence of items
Step Card
Used to choose which step to add to a Deployment Process
Navigation
Breadcrumbs
Breadcrumbs are a series of links that help understand user’s location in a hierarchy
Menu
Menu displays a list of choices in a dropdown
Pagination
Pagination divides large amounts of data into separate pages
Messaging
Beacon
Beacon helps spotlight specific areas in the interface
Callout
Callouts are used to communicate success, errors, warnings or actionable information
Error Panel
Highlights one or more error messages
Inline Message
Inline Message highlights a short, non-urgent contextual message and prompts the user to take action.
Overlays
Drawer
Drawers contain supplementary content or actions, overlaying content from the right side
Onboarding Dialog
An Onboarding Dialog guides users through a task step by step and provides additional helpful information.
Overlay
Overlay can be used to highlight an area of the page
Popover Basic
Popover is a temporary overlay window that contains contextual information
Popover Sequential
Popover Sequential is a temporary overlay that contains supplementary content, grouped in several steps
Tooltip
Tooltips display informative text when users hover over an element
Status Indicators
Badge
Badges highlight the status of a corresponding object
Counter Badge
Counter Badges add a count to an associated item
Progress
Progress represents the state of completion of a task or process
Progress Tracker
The Progress Tracker guides users through multi-step workflows, showing completed, current, and incomplete steps, helping them stay oriented across multiple screens.
Snackbar
Snackbars provide brief messages or feedback about a process at the bottom of the screen
Status Badge
Status Badges show the health status of an entity (Deployment Targets and Workers)
Stepper
Stepper indicates a user’s position in a sequence of defined number of steps
Task Status
Task Status is used to show the status of a task or deployment