Generally, an alert displays a prominent message at the top of the screen. It could be used to promote a new feature or provide action-based feedback messages. Theyâ€™re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time.

Alert

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Avatar

Checkbox are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Checkbox

Useful for displaying a visual separator between parts of content. Used to divide sections of an article or to divide inline text and links, such as the operation column of a table.

Divider

This component presents a list of options that take immediate action or navigate the user outside of the current context. It can be thought of as a collection of links or buttons.

Modal

The Popover component displays floating informative and actionable content in relation to a target. Popovers appear either at the top, bottom, left, or right of their target.

Popover

A Progress Bar is a linear indicator for providing feedback about an ongoing, user-initiated process.

Progress Bar

Use Radio to select a single option from a list. Radio should be used instead of checkboxes if only one item can be selected from a list.

Radio

This component could be thought of as a styled native select tag, but adding to it more functionalities such as filtering, multi selecting, among others. The source of the Select (Dropdown) is a list of options that the user can choose from and apply to an input field to later be submitted.

Select

Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track.

Slider

Switch represents a physical switch that allows users to turn things on or off, where choosing an option results in an immediate action.

Switch

Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, bottom-left, etc). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform.

Toast

A toggle button allows a user to pick between 2 states, selected and deselected, such as making an item as a favorite.

Toggle Button

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Tooltip

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

Radix