Use these core components that are compliant with our style to create user interfaces. Browse all the components or select a specific category.


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.


A badge is a label or indicator for communicating information in a visual way.


The breadcrumb helps users to orient where they are in the hierarchy.


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.


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.


Links are navigational elements used next to content or in-line with text.


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.


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.


Snackbars are messages that appear briefly to describe app processes.


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.


Used to switch between two opposing states in the UI, usually on/off.


Tooltips are text containers offering extra information about a given area of the UI.