Avatar
The avatar serves as a visual element representing the user, profile, chatbot, or user group.
Avatar group
A group of avatars used to visually display a bunch of users or profile.
Avatar info
If we need to include text information with the avatar, we can use a avatar info.
Badge
A badge is a label or indicator for communicating information in a visual way.
Breadcrumb
The breadcrumb helps users to orient where they are in the hierarchy.
Button
A button allows users to perform actions or to navigate to other pages.
Button group
Button groups offer quick access to actions that are related to each other.
Checkbox
Checkboxes offer the user clickable options for a related statement.
Checkbox button
Checkbox buttons offer users quick access to related actions.
Confirmation dropdown
Dropdown menus present a list of options from which the user can select one.
Data table
Tables use columns and rows to display actionable data within the UI.
Dropdown menu
Popovers are an alternative to high-impact dialogs.
Link
Links are navigational elements used next to content or in-line with text.
Modal
Modals serve to focus the user’s attention on one task or piece of information.
Number input
Allows users to enter a numeric value and change this value with two controls.
Progress bar
The visual element providing information about the status or collecting process.
Radio button
Radio buttons allow users to select a single option from mutually exclusive choices.
Segmented control
A segmented control is a group of two or more segmented control buttons with related content.
Select
Select is used to choose one or more options from a list.
Selectable item
The base for the lists in the selects or modals representing selectable parts.
Side panel
A side panel is an overlay used to focus the user’s attention on multiple tasks.
Snackbar
Snackbars are messages that appear briefly to describe app processes.
Tab
Tabs are used to organize content by allowing the user to switch views.
Text input
Text input allows the user to interact with and input content and data.
Toggle
Used to switch between two opposing states in the UI, usually on/off.
Toggletip
Tooltip
Tooltips are text containers offering extra information about a given area of the UI.