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