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

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

Breadcrumbs

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

Button

The Calendar component is used for displaying data in calendar form, suitable for scenarios involving dates such as schedules, timetables, price calendars, and lunar calendars.

Calendar

Cards are used to group information about subjects and their related actions. Cards can include images, text, buttons, links, and data visualizations.

Card

Carousels are for displaying a related set of content items in a row. Items can be paged using the next/previous buttons or by a swipe gesture.

Carousel

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

Checkbox

The color picker allows for multiple methods of selecting a color. It could be navigating through colors on a color spectrum, or specifying a color in either Red-Green-Blue (RGB); or alpha color code; or Hexadecimal text inputs.

Color Picker

Similar to the Select (Dropdown) but allowing the user to edit the input field in order to sort through the list of options.

Combobox

A Date Picker is a text input to capture a date. You can select a single date, date range or date and time.

Date Picker

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

The File Uploader allows a user to transfer a file or submit content of their own.

File Uploader

Modal dialogs are used to present important information or gather essential user input without requiring the user to navigate away from the current page. These dialogs capture the user's attention by overlaying content and blocking interactions.

Modal

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Pagination

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

The rating provides insight regarding people's opinions of a product, service, or experience. Users can also rate what they've purchased.

Rating

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

Skeleton provides a low fidelity representation of the user interface to visually communicate that content is in the process of loading. Some studies indicate that Skeletons can reduce the user's perceived loading time.

Skeleton

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

A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Use a Spinner when the content to be loaded is unknown or unpredictable.

Spinner

A stepper is a visual representation of a user’s progress through a set of steps, indicating how much the user has completed or how far they are from completing a task.

Stepper

Table is a container for displaying data efficiently. Usually, it allows users to sort, search, paginate, filter data, and take action on large amounts of data.

Table

A text input is a field that allows a user to write or edit text.

Text Input

A multi-line text input component, used for longer texts in form fields. A Textarea lets users enter long form text which spans over multiple lines.

Textarea

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

Frames X is the one Figma design system and Handbook to streamline your workflow, help complete projects faster, and get paid more by managing more clients efficiently.