Components
Actions
Button
Buttons allow users to take actions that will trigger a response
Switch
Switch is used to toggle between two states, usually on or off.
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
Bindable Field
Toggles between a value picker (a Select / MultiSelect) and a variable expression text field.
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.
File Upload
An input that allows users to upload a file or multiple files from their device.
Form Section
Used to group related form elements into a distinctive section. Can be static or interactive.
Markdown Editor
Used to edit markdown content and provides actions for simple tasks such as bold and italic text.
Number Field
Used to enter numbers that’s no longer than one line.
MultiSelect
Used to choose multiple options from a predefined list of options.
Radio Group
Radio Group allows the user to select one option from an available list
Search Input
Search Input allows users to perform in-page content searches
Select
Used to choose multiple options from a list of choices.
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.
Timespan
Used to specify a period of time in various formats (days, hours, minutes, and/or seconds).
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
Accordion
An interactive heading that can be collapsed and expanded to hide and reveal content.
Advanced Filter Panel
Advanced Filter Panel lets users narrow down large result sets.
Card
A container for content representing one option in a group, used as a choice mechanism.
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
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
Highlights information or provides feedback, and prompts users to take action.
Error Summary
Highlights one or more server errors, either due to exceptional circumstances or form validation issues.
Inline Message
Highlights a short, non-urgent contextual message and prompts the user to take action.
Overlays
Dialog
Displayed on top of the page content, focusing the user’s attention on one task or piece of information.
Drawer
Drawers contain supplementary content or actions, overlaying content from the right side
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
Upsell Dialog
Dialog with side panel specifically designed for upselling.
Status Indicators
Badge
Badges highlight the status of a corresponding object
Counter Badge
Counter Badges add a count to an associated item
Inline Snackbar
Shows a temporary message near the component the user interacted with.
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
Live Status
Live Status is used to show the live status of Kubernetes applications after they have been deployed.