Fluent UI

Philosophy

The official front-end framework for building experiences that fit seamlessly into Microsoft 365.

Principles

• Familiar and natural
• Accessible
• Consistent across Microsoft products
• Performance-optimized

Components

In our catalogue (31)

• Alerthttps://developer.microsoft.com/en-us/fluentui#/controls/web/messagebar
• Breadcrumbshttps://developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb
• Buttonhttps://developer.microsoft.com/en-us/fluentui#/controls/web/button
• Button grouphttps://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
• Cardhttps://developer.microsoft.com/en-us/fluentui#/controls/web/documentcard
• Checkboxhttps://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
• Color pickerhttps://developer.microsoft.com/en-us/fluentui#/controls/web/colorpicker
• Comboboxhttps://developer.microsoft.com/en-us/fluentui#/controls/web/combobox
• Datepickerhttps://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker
• Dropdown menuhttps://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
• Fieldsethttps://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
• Iconhttps://developer.microsoft.com/en-us/fluentui#/controls/web/icon
• Imagehttps://developer.microsoft.com/en-us/fluentui#/controls/web/image
• Labelhttps://developer.microsoft.com/en-us/fluentui#/controls/web/label
• Linkhttps://developer.microsoft.com/en-us/fluentui#/controls/web/link
• Listhttps://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
• Modalhttps://developer.microsoft.com/en-us/fluentui#/controls/web/dialog
• Navigationhttps://developer.microsoft.com/en-us/fluentui#/controls/web/nav
• Progress barhttps://developer.microsoft.com/en-us/fluentui#/controls/web/progressindicator
• Ratinghttps://developer.microsoft.com/en-us/fluentui#/controls/web/rating
• Search inputhttps://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox
• Separatorhttps://developer.microsoft.com/en-us/fluentui#/controls/web/separator
• Skeletonhttps://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer
• Sliderhttps://developer.microsoft.com/en-us/fluentui#/controls/web/slider
• Spinnerhttps://developer.microsoft.com/en-us/fluentui#/controls/web/spinner
• Stackhttps://developer.microsoft.com/en-us/fluentui#/controls/web/stack
• Stepperhttps://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton
• Tabshttps://developer.microsoft.com/en-us/fluentui#/controls/web/pivot
• Text inputhttps://developer.microsoft.com/en-us/fluentui#/controls/web/textfield
• Togglehttps://developer.microsoft.com/en-us/fluentui#/controls/web/toggle
• Tooltiphttps://developer.microsoft.com/en-us/fluentui#/controls/web/callout