Web React 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.
An accordion groups sections of related content that can be opened and closed.
An avatar shows an image or text to represent a person or group as well as give additional information like their status and activity.
An avatar group shows multiple avatars.
A badge is a visual indicator that communicates a status or description of an associated component.
A button triggers a single action or event.
A card is a container that holds information and actions related to a single concept or object, like a document or a contact.
Checkboxes let people select multiple options from a group or switch a single option on or off.
A combobox lets people choose one or more options from a list or enter text in a connected input.
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.
A divider groups sections of content to create visual rhythm and hierarchy.
A dropdown lets people choose one or more options from a list.
A field is a combination of a label and any form component, like an input or a select.
The Fluent provider defines the styles that are used in your app.
Icons represent concepts, objects, or actions, and have semantic purpose within a layout.
Images, like photos and illustrations, help reinforce a message and express your product or app's style.
An info button is a recognizable icon that lets someone know when there is supplemental information available.
An input allows people to enter short, free-form text data.
Labels give a name to a component or group of components.
A link is styled text that leads somewhere else, either within an experience or to a different app or site.
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.
A persona is a representation of a person with additional contextual information.
A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them.
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.
Radio groups let people select a single item from a short list.
A select lets people choose a single option from a list of at least four options.
A skeleton lets people know that a section of content is loading without blocking other parts of the page.
A slider lets someone set a value from a given range.
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.
Spinners visually communicate that something is processing.
A switch lets someone choose between two mutually exclusive options, like on or off.
A tablist is a group of headers, or tabs, that lets people navigate between different views of related information without going to different pages.
The text component codifies Fluent's opinions on typography to make them easy to use and standardize across products.
A textarea allows people to enter long, free-form text data, like a comment.
A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor.
A tooltip provides supplemental, contextual information elevated near its target component.