Web overview
Components are the non-contextualized building blocks of a design system, built to solve specific UI problems. Fluent Web is available for both Web Components and React for consistent web experiences, no matter the tech.
Need to get set up first? Check out the get started guides.
Resources
Components
![Accordion thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_accordion.B8eJ_Qlv.png)
Accordion
An accordion groups sections of related content that can be opened and closed.
![Avatar thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_avatar.CLck4KeC.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_avatargroup.qUF2ZF1F.png)
Avatar group
An avatar group shows multiple avatars.
![Badge thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_badge.HrWhDpUp.png)
Badge
A badge is a visual indicator that communicates a status or description of an associated component.
![Breadcrumb thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Breadcrumb
A breadcrumb helps people understand and move through the hierarchy of a complex site or app.
![Button thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_button.Baa-fciS.png)
Button
A button triggers a single action or event.
![Card thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_card.COS49rMR.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_checkbox.C4LCt4a7.png)
Checkbox
Checkboxes let people select multiple options from a group or switch a single option on or off.
![Combobox thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_combobox.pLntKsZA.png)
Combobox
A combobox lets people choose one or more options from a list or enter text in a connected input.
![Dialog thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_dialog.Bw6E0OWs.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_divider.BJR5Rh0l.png)
Divider
A divider groups sections of content to create visual rhythm and hierarchy.
![Drawer thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Drawer
A drawer is a secondary content surface that slides in from one edge of a layout.
![Dropdown thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_dropdown.BgcsGVV8.png)
Dropdown
A dropdown lets people choose one or more options from a list.
![Field thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_field.U6RUW_N0.png)
Field
A field is a combination of a label and any form component, like an input or a select.
![Fluent provider thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_fluentprovider.D5O9Ga8h.png)
Fluent provider
The Fluent provider defines the styles that are used in your app.
![Icon thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_icon.Bdk9VKmn.png)
Icon
Icons represent concepts, objects, or actions, and have semantic purpose within a layout.
![Image thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Image
Images, like photos and illustrations, help reinforce a message and express your product or app's style.
![Info label thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Info label
An info label is a label paired with an info button that shows additional content in a popover when selected.
![Input thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_input.Cagzgzx-.png)
Input
An input allows people to enter short, free-form text data.
![Label thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_label.Bmkowt6P.png)
Label
Labels give a name to a component or group of components.
![Link thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_link.CUfhnKsB.png)
Link
A link is interactive text that lets people navigate somewhere else, either within an experience or to a different app or site.
![Menu thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_menu.DZ_QmfGO.png)
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.
![Message bar thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Message bar
A message bar communicates important information about the state of the entire product or the surface where it appears, such as a page, drawer, dialog, or card.
![Persona thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_persona.aUBVUDiX.png)
Persona
A persona is a representation of a person with additional contextual information.
![Popover thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_popover.wcuupTPt.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_progressbar.CxzXu_M7.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_radiogroup.CsXFFZdv.png)
Radio group
Radio groups let people select a single item from a short list.
![Select thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_select.ABFgkwx0.png)
Select
A select lets people choose a single option from a list of at least four options.
![Skeleton thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_shimmer.Dxr4gS_2.png)
Skeleton
A skeleton lets people know that a section of content is loading without blocking other parts of the page.
![Slider thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_slider.DgGIq6Z_.png)
Slider
A slider lets someone set a value from a given range.
![Spin button thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_spin.c4zwZGzQ.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_spinner.BduIW_C0.png)
Spinner
Spinners visually communicate that something is processing.
![Switch thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_switch.Cd-7Ge6N.png)
Switch
A switch lets someone choose between two mutually exclusive options, like on or off.
![Tablist thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_tablist.CTZsc6f-.png)
Tablist
A tablist allows people to switch between categories of related information without going to different pages.
![Tag thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
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 thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_text.B8EWu50L.png)
Text
The text component codifies Fluent's opinions on typography to make them easy to use and standardize across products.
![Textarea thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_textarea.DKS9fpjR.png)
Textarea
A textarea allows people to enter long, free-form text data, like a comment.
![Toast thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_placeholder.DKLLlbq1.png)
Toast
A toast communicates the status of an action someone is trying to take or that something happened elsewhere in the app.
![Toolbar thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_toolbar.Dw7et3HS.png)
Toolbar
A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor.
![Tooltip thumbnail](https://fluent2websitecdn.azureedge.net/cdn/overview_tooltip.DzdzrdMi.png)
Tooltip
A tooltip provides supplemental, contextual information elevated near its target component.