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.
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.
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.
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.
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.