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.
Avatar
Avatars are graphic representations of 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.
Bottom sheet
Overlay component that presents contextual content or short flows. It is used to focus the user's attention and should be used sparingly and with caution as they are disruptive interface elements.
Button
Buttons communicate possible user actions. Clicking on a button allows a user to perform the corresponding action.
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.
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.
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.
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 communicate possible user actions. Clicking on a button allows a user to perform the corresponding action. Icon buttons are suited for common, easily recognizable actions that don't require labels.
Label
The Label component is used to clearly identify a form control or to provide concise status information about an element or section.
Link
Links are text-based interactive elements used to navigate users to external sites outside the app. They can be used inline or as standalone text.
List
List organizes repeated content into a clear vertical pattern, making interfaces easier to scan, navigate, and act on.
Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Radio Button
Radio buttons allows a user to select a single option from a group of options.
Segmented control
Segmented Control is a group of connected controls that enables users to select one or more related options to switch context or filter content without leaving the current screen.
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.
Text Input
Text Input enable users to enter text data. They support different formats such as plain text, passwords, numbers, or dates.
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.
Toggle
Toggle allows a user to immediately toggle a specific option on or off.
Toolbar
Toolbar is a container that provides quick access to a set of contextual actions or controls related to the current screen or content.