Actions Components that can be used to trigger an action.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Button bar
The Button bar provides a organized way to present buttons side by side.
Illustration of button component. An illustrated button component representing button component card. Illustration of button component. An illustrated button component representing button component card. Button
Buttons let users make choices and take action.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Toggle button
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.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Toggle group
A toggle group lets users control related actions with clear visual feedback in a compact UI element.
Feedback & status Components that communicate the states of the system to the user.
Illustration of the badge component. An illustrated badge component representing badge component card. Illustration of the badge component. An illustrated badge component representing badge component card. Badge
A badge is a non-interactive visual indicator used to communicate status.
Illustration of the inline message component. An illustrated inline message component representing inline message component card. Illustration of the inline message component. An illustrated inline message component representing inline message component card. Inline message
Inline messages communicate contextual information.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Progress bar
The progress bar is a visual indicator that shows how much of a task or process has been completed.
Illustration of the skeleton component. An illustrated skeleton component representing skeleton component card. Illustration of the skeleton component. An illustrated skeleton component representing skeleton component card. Skeleton
Skeletons are used to provide a low fidelity representation of content before it appears in a view.
Illustration of the spinner component. An illustrated spinner component representing spinner component card. Illustration of the spinner component. An illustrated spinner component representing -component- component card. Spinner
Spinner is used as a loading indicator.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Tag
Tags represent a set of keywords that help label, categorize, and organize objects.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Tree View
The Tree View component displays hierarchical data in a structured, interactive, and navigable manner, allowing users to explore nested elements efficiently.
Form Components that are crucial for capturing and processing user input.
Illustration of the checkbox component. An illustrated checkbox component representing checkbox component card. Illustration of the checkbox component. An illustrated checkbox component representing checkbox component card. Checkbox
Checkboxes allow user to make yes or no decisions.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Combobox
An combobox is an advanced dropdown selection component with autocomplete functionality for efficient and intuitive user input
Illustration of the form field component. An illustrated form field component representing form field component card. Illustration of the form field component. An illustrated form field component representing form field component card. Form field
Wrapper component for forms
Illustration of the form component. An illustrated form component representing form component card. Illustration of the form component. An illustrated form component representing form component card. Form
Wrapper component for forms
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Number Field
Number Field is a component for entering and adjusting numeric values with optional increment and decrement controls.
Illustration of the radio button component. An illustrated radio button component representing radio group component card. Illustration of the radio button component. An illustrated radio button component representing radio group component card. Radio group
Component used to make single choice.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Search field
A search field lets users specify a word or phrase to filter relevant content within a specific page section.
Illustration of select component. An illustrated select component representing select component card. Illustration of select component. An illustrated select component representing select component card. Select
A select component allows users to choose from a predefined list of options.
Illustration of switch component. An illustrated switch component representing switch component card. Illustration of switch component. An illustrated switch component representing switch component card. Switch
With switches you can choose between enabled or disabled states.
Illustration of textarea component. An illustrated textarea component representing textarea component card. Illustration of textarea component. An illustrated textarea component representing textarea component card. Text area
Text areas allow users to enter and edit multi-line text.
Illustration of text field component. An illustrated text field component representing text field component card. Illustration of text field component. An illustrated text field component representing text field component card. Text field
A text field component allows users to enter and edit single-line textual input.
Layout Components that can be used to organize and structure page content.
Illustration of the accordion component. An illustrated accordion component representing accordion component card. Illustration of the accordion component. An illustrated accordion component representing accordion component card. Accordion
An accordion consists of a vertically stacked list of headers.
Illustration of the card component. An illustrated card component representing card component card. Illustration of the card component. An illustrated card component representing card component card. Card
Cards display content or actions related to a single subject.
Media These components show users, actions, or items, making your app look better and easier to understand.
Illustration of the avatar component. An illustrated avatar component representing avatar component card. Illustration of the avatar component. An illustrated avatar component representing avatar component card. Avatar
An avatar is a visual representation of a user or entity.
Illustration of the icon component. An illustrated icon component representing icon card. Illustration of the icon component. An illustrated icon component representing icon card. Icon
Icons communicate messages, enhance interactivity, and highlight critical information.
Navigation Components that help users find their way around your app easily and understand its structure.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Breadcrumbs
Breadcrumbs are a navigation element used to show a user's location in a digital product.
Illustration of the tabs component. An illustrated tabs component representing tabs component card. Illustration of the tabs component. An illustrated tabs component representing tabs component card. Tabs
Tabs let users switch between views within the same context.
Overlay Components that add a bit of extra screen real estate. Or will focus the attention of the user in a specific, smaller area of the screen.
Illustration of the dialog component. An illustrated dialog component representing dialog component card. Illustration of the dialog component. An illustrated dialog component representing dialog component card. Dialog
A dialog serves as a container for in-page contextual information or actions.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Menu
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.
Illustration of coming component. An illustrated coming component representing coming component card. Illustration of coming component. An illustrated coming component representing coming component card. Message dialog
A dialog for displaying messages to the user.
Illustration of the popover component. An illustrated popover component representing popover component card. Illustration of the popover component. An illustrated popover component representing popover component card. Popover
A popover is a layer that pops up over all other elements on a page.
Illustration of the tooltip component. An illustrated tooltip component representing tooltip component card. Illustration of the tooltip component. An illustrated tooltip component representing tooltip component card. Tooltip
A tooltip is a small, contextual overlay that provides additional information.