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

Avatar

The Badge component is a visual indicator for numeric values such as tallies and scores.

Badge

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

Button

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

Card

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

Checkbox

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

Combobox

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

Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

Link

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

You may find the Number Input in several presentations, either as an Input, or a Label with increment and decrement buttons next to it. This component requires that the user less effort than selecting the input field, tapping the digit “2” on the keypad, and hitting Enter or dismissing the keyboard. For example, to increase the number of guests from 1 to 2 in a form, the user only needs one tap on the plus button.

Number Input

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

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

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

Switch

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

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

A collection of UX frameworks you can use to build Fluent experiences that fit seamlessly into a broad range of Microsoft products.

Fluent 2