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.
Alert
Alerts are high-friction, system-level interruptions used to confirm decisions or warn users about unexpected consequences.
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.
Collapse
A Collapse toggles the visibility of inline content in response to a user request. Use it for content that belongs on the current page or task, but only some users need to see at any given moment.
Drawer
The Drawer component allows contextual content or secondary navigation to be displayed from one side of the screen while preserving the current screen context.
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.
Header
The Header component is used to present contextual information and primary actions within a screen in mobile apps.
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.
Menu
A Menu presents a temporary list of actions or selectable items in a compact container. It is triggered from an interactive element, and helps users make a choice without leaving the current context.
Nav bar
Navigation Bar provides persistent access to the main sections of an app from the bottom of the screen. It enables users to quickly switch between top-level destinations within the application.
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.
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.
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.
Tabs
Tabs organize a screen's content into separate sections. Each section is its own destination the user can move between, and one tab is always selected.
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.
Toast
A toast is a brief, temporary notification shown at the bottom of the screen that confirms the outcome of an action or process.
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.