Components are one of the key building blocks of the design system. Each component meets a specific interaction or UI need, and help to create visual and functional consistency across products.
Action bar
The action bar enables users to perform actions on one or multiple selected items within a view or context.
Avatar
Avatars are graphic representations of our users and entities in the interface.
Badge
A badge is a visual label or indicator used to convey status, count, or categorize content. Badges are read-only status and are not interactive.
Banner
Banner provides a distinguishable and non-disruptive way to communicate important information or conditions to users. Banners should be used sparingly and only for important messages.
Breadcrumb
Breadcrumbs are a navigation pattern that allows user to see where they are in the hierarchy of a site.
Button
Buttons communicate possible user actions. Clicking on a button allows a user to perform the corresponding action. Buttons appear differently based on their use category and the priority level of their call to action.
Button Group
Button Groups bring together button controls that belong to the same context. They help us save space when needed.
Card
The card is a wrapper that displays content and actions on a single topic. It helps us structure the information that a user needs to digest.
Calendar
The calendar component allows users to select a single date or a range of dates from a visual calendar interface. It provides a consistent way to enable date selection within applications, supporting both single-date and range selection patterns.
Checkbox
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, checkboxes are used for making non-mutually exclusive selections.
Collapse
A Collapse is a content area commonly used to organize related information that can be collapsed and expanded. It can be triggered by just a heading or a more complex content snippet.
Combobox
Combobox is an autocomplete input that allows users to filter and select one or more values from a list of options.
Date Picker
A date picker is an input control that allows the user to select a single date or a range of dates by either typing or selecting from a calendar.
Divider
Divider component is used to semantically and decoratively separate content into groups.
Dropdown Menu
A dropdown menu is used to display a list of actions or selectable options with immediate response. It must be triggered by another component, like a button or icon button.
Empty State
Empty states are used to fill blank spaces when no content is present, or when the feature is temporarily empty. They are meant to propose a path forward.
Feedback
Feedback provides contextual, assistive, or descriptive information related to an adjacent component, such as a form field, image, or chart. It serves as supportive text that clarifies status, input rules, or visual content.
Fieldset
The Fieldset component implements a container for visually-grouped elements, such as checkboxes and radio groups.
Filter
The filter component lets users narrow down visible data by selecting specific values or ranges.
File Upload
A File Upload allows to choose one or more files from a device storage and upload them to a specific location.
Grid
The Grid component provides a 12-column fluid grid component that spans its whole parent area with flexible columns and fixed gaps.
Header
The Header shows the current page's title, main actions, and optional description. It includes back navigation for nested pages, helping users understand their location in the app and move back easily.
Icon
The Icon component allows you to display an icon from the Iconography library. They are used to provide additional meaning or give a hint about the usability of the component they are used in.
Icon Button
The Icon Button is used to display supplementary actions in the interface, either to trigger actions or drive navigation is allowed. They cannot be used as the main call to action.
Illustration
The illustration component is only available for design and allows to display an illustration inside a component. Illustrations are used to provide additional meaning in an interface.
Input
Inputs enable users to enter text data. They support different formats such as plain text, passwords, numbers, or dates.
Label
The Label component is used to clearly identify a form control or to provide concise status information about an element or section.
Layout
The top-most structural component in any view and acts as the main wrapper for smaller items within it. The Layout component defines the main layout structure of a page by providing standard sizing and spacing for the different content areas.
Link
Links are clickable elements that guide users to new webpages, other websites, or specific sections within the current page.
Loading overlay
Loading Overlay component allows to wrap any content (such as cards, sections, or multiple elements) and display a semi-transparent overlay with a spinner above it. This visually indicates that the underlying content is in a loading or processing state, preventing user interaction until the operation is complete.
Modal
Modal dialog overlays on top of the main content of a page. It is used to focus the user's attention on a specific task and require interaction before they can continue browsing the site. Modal dialogs are disruptive and should be used sparingly and with caution.
Navigation List
Provides local navigation for the current context and indicates the current view. It is typically placed in the sidebar of the page and changes what is shown in the main area.
Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages. It includes truncation and default index selection.
Popover
Popover is an overlay that opens on demand after clicking on the trigger. Popover allows to expose extra information or functionality to the user. It should always open next to the trigger.
Progress Bar
A progress bar shows the completion status of an ongoing task. It can show a user that something is loading, processing, or advancing, managing expectations and preventing frustration.
Radio
Radio buttons allows a user to select a single option from a group of options.
Segmented Control
Segmented Control is a linear set of connected controls that lets users select one or more related options, instantly updating the content or view within the same screen.
Select
The select component allows users to choose one item from a menu of options. It is generally used in forms to submit data.
Skeleton
Skeleton is low-fidelity visual placeholder that represents the loading of an interface element before it is displayed on the page. Skeleton should be used for dynamic content only.
Spacer
Spacer is a wrapper component that adds controlled margins around a single element. It’s meant for isolating one item, not for managing layout between multiple elements.
Spinner
A spinner is a visual indicator that confirms a process is happening in the background but the component or view is not yet ready for interaction.
Stack
1-dimensional layout system with options to control the direction, spacing, distribution, and relative sizing of its children elements.
Step Indicator
A Step Indicator shows the user their progress along the process of completing a task. User actions are required for the progress to be updated.
Table
A table is a component used to display and organize information from a data set. Provides styles and features like row selection or sortable columns.
Tabs
Tabs are used to organize and navigate between related views at the same hierarchy level. Tabs can include icons to reinforce labels and counters to inform about the tab's content.
Text
Declarative way to render text with the correct design-system styles applied. It ensures consistent typography, colors, and semantics across the product.
Textarea
Textarea enables users to enter multi-line text data.
Tile
A Tile is a flexible container that groups related content and actions in a clear, interactive format. It can function as a selectable or clickable element, enabling navigation, quick actions, or option selection.
Toast
Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.
Toggle
Allows users to toggle a specific option on or off immediately.
Tooltip
Small pop-up box that appears when a user hovers over an element. Tooltip can be used to provide additional information or context about that element. They should only contain supplementary, non-essential information and be used sparingly.