The Button bar provides a organized way to present buttons side by side.
Buttons let users make choices and take action.
A toggle button is a button that changes its state between "on" and "off" using an icon to represent its current state. It consists of just an icon (without any text) that changes visually to indicate the toggle state.
A badge is a non-interactive visual indicator used to communicate status.
Inline messages communicate contextual information.
The progress bar is a visual indicator that shows how much of a task or process has been completed.
Skeletons are used to provide a low fidelity representation of content before it appears in a view.
Spinner is used as a loading indicator.
Tags represent a set of keywords that help label, categorize, and organize objects.
Checkboxes allow user to make yes or no decisions.
Wrapper component for forms
Wrapper component for forms
Component used to make single choice.
A search field lets users specify a word or phrase to filter relevant content within a specific page section.
A select component allows users to choose from a predefined list of options.
With switches you can choose between enabled or disabled states.
Text areas allow users to enter and edit multi-line text.
A text field component allows users to enter and edit single-line textual input.
An accordion consists of a vertically stacked list of headers.
Cards display content or actions related to a single subject.
An avatar is a visual representation of a user or entity.
Icons communicate messages, enhance interactivity, and highlight critical information.
Breadcrumbs are a navigation element used to show a user's location in a digital product.
Tabs let users switch between views within the same context.
A dialog serves as a container for in-page contextual information or actions.
A menu provides relevant actions based on the user's current selection, enhancing usability by offering quick access to necessary options and reducing cognitive load.
A dialog for displaying messages to the user.
A popover is a layer that pops up over all other elements on a page.
A tooltip is a small, contextual overlay that provides additional information.