Web overview

Components are the building blocks of a design system, built to solve specific UI problems. Fluent React components are now more lightweight, bringing your web apps improved performance and decreased bundle size.

Need to get set up first? Check out the start designing and start developing guides.



PreviewAccordion thumbnail


An accordion groups sections of related content that can be opened and closed.

PreviewAvatar thumbnail


An avatar shows an image or text to represent a person or group as well as give additional information like their status and activity.

PreviewAvatar group thumbnail

Avatar group

An avatar group shows multiple avatars.

PreviewBadge thumbnail


A badge is a visual indicator that communicates a status or description of an associated component.

PreviewButton thumbnail


A button triggers a single action or event.

PreviewCard thumbnail


A card is a container that holds information and actions related to a single concept or object, like a document or a contact.

PreviewCheckbox thumbnail


Checkboxes let people select multiple options from a group or switch a single option on or off.

PreviewCombobox thumbnail


A combobox lets people choose one or more options from a list or enter text in a connected input.

PreviewDialog thumbnail


A dialog is a supplemental surface that can provide helpful interactions or require someone to take an action before they can continue their task, like confirming a deletion.

PreviewDivider thumbnail


A divider groups sections of content to create visual rhythm and hierarchy.

PreviewDropdown thumbnail


A dropdown lets people choose one or more options from a list.

PreviewField thumbnail


A field is a combination of a label and any form component, like an input or a select.

PreviewFluent provider thumbnail

Fluent provider

The Fluent provider defines the styles that are used in your app.

PreviewIcon thumbnail


Icons represent concepts, objects, or actions, and have semantic purpose within a layout.

PreviewImage thumbnail


Images, like photos and illustrations, help reinforce a message and express your product or app's style.

PreviewInfo button thumbnail

Info button

An info button is a recognizable icon that lets someone know when there is supplemental information available.

PreviewInput thumbnail


An input allows people to enter short, free-form text data.

PreviewLabel thumbnail


Labels give a name to a component or group of components.

PreviewLink thumbnail


A link is interactive text that lets people navigate somewhere else, either within an experience or to a different app or site.

PreviewMenu thumbnail


A menu is a hidden list of options that is shown when someone interacts with a trigger component, like a button, an avatar, or an icon.

PreviewPersona thumbnail


A persona is a representation of a person with additional contextual information.

PreviewPopover thumbnail


A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them.

PreviewProgress bar thumbnail

Progress bar

Progress bars communicate system information, like how much cloud storage someone is using in OneDrive, or task information, like how long until a download is complete.

PreviewRadio group thumbnail

Radio group

Radio groups let people select a single item from a short list.

PreviewSelect thumbnail


A select lets people choose a single option from a list of at least four options.

PreviewSkeleton thumbnail


A skeleton lets people know that a section of content is loading without blocking other parts of the page.

PreviewSlider thumbnail


A slider lets someone set a value from a given range.

PreviewSpin button thumbnail

Spin button

A spin button is a specialized input that lets someone easily increase or decrease a value within a set range, like dates in a month.

PreviewSpinner thumbnail


Spinners visually communicate that something is processing.

PreviewSwitch thumbnail


A switch lets someone choose between two mutually exclusive options, like on or off.

PreviewTablist thumbnail


A tablist is a group of tabs that allow people to switch between categories of related information without going to different pages.

PreviewTag thumbnail


A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task.

PreviewText thumbnail


The text component codifies Fluent's opinions on typography to make them easy to use and standardize across products.

PreviewTextarea thumbnail


A textarea allows people to enter long, free-form text data, like a comment.

PreviewToolbar thumbnail


A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor.

PreviewTooltip thumbnail


A tooltip provides supplemental, contextual information elevated near its target component.