Text & Label
Text Sizes
tiny (10px)
small (12px)
medium (14px — default)
mediumPlus (16px)
large (18px)
xLarge (20px / semibold)
xxLarge (28px / semibold)
Text Colors
Default body text
Secondary text
Disabled text
Error text
Success text
Semibold text
Bold text
Labels
Link & Icon
Links
Icons
Add
Delete
Edit
Save
Mail
Send
Settings
Search
Home
Calendar
Person
Document
Filter
Copy
Share
TextField
Standard
Must be a positive number
Variants
https://
Checkbox
Toggle
Dropdown
United States
United Kingdom
Germany
Japan
Low
Medium
High
Critical
Stack
Vertical (default)
Row 1
Row 2
Row 3
Horizontal + grow
Grows
Fixed
Fixed
Horizontal + center
Centered
Items
Horizontal + wrap
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Separator
Above separator
Below separator
Below separator
Left
Middle
Right
Middle
Right
Spinner
xSmall
small
medium
Loading…
MessageBar
Dialog
Panel
Settings
Medium Panel
This is a medium-width panel (592px).
Callout
Callout Title
This is a callout with helpful information anchored to the button above.
CommandBar
Pivot
Overview content goes here. This is the first tab panel.
Details content with more information.
History of changes and activity.
DetailsList
SearchBox
ProgressIndicator
Uploading files…
65% complete
Complete
Processing…
Tooltip
Hover for tooltip
Help link
Persona
Sizes & Presence
JD
Jane Doe
JS
John Smith
Software Engineer
AJ
Alex Johnson
Product Manager
Contoso Ltd
MK
Maria Kim
Designer
ChoiceGroup
Vertical (default)
Horizontal
Shimmer
Lines
Row with avatar
Block
List
Bordered & Scrollable
Selected Item
Second Item
Two-line Item
Secondary text here
Disabled Item
Fifth Item
Sixth Item
Compact
Item Alpha
Item Beta
Item Gamma
Item Delta
GroupedList
Document.docx
Report.xlsx
Slides.pptx
OldFile.doc
Locked.pdf
Rating
Interactive
Readonly (4 stars)
Large
Facepile
Default (all visible)
JD
AB
MK
With overflow (max 3)
JD
AB
MK
TW
SR
With add button
JD
AB
SwatchColorPicker
Square
Circle
DocumentCard
Quarterly Report.docx
JD
Jane Doe
Modified Feb 20
Budget 2026.xlsx
John Smith · Feb 18
Slider
Horizontal
Disabled
ComboBox
Single select
Apple
Banana
Cherry
Grape
Mango
Orange
Peach
Multi-select
Cheese
Pepperoni
Mushrooms
Olives
Onions
TeachingBubble
Welcome to FluentLM!
This is a teaching bubble. It draws attention to a feature and provides guidance to help users understand it.
HoverCard
Hover for details
Jane Doe
Software Engineer · Contoso
Coachmark
Click the pulsing dot to see the teaching bubble:
New Feature
This coachmark highlights a new feature. The beacon disappears once dismissed.
DatePicker
Default
With constraints
TagPicker
Default
React
Angular
Vue
Svelte
TypeScript
JavaScript
Max 3 tags
Apple
Banana
Cherry
Grape
Mango
PeoplePicker
JD
Jane Doe
Software Engineer
JS
John Smith
Product Manager
AW
Alice Wang
Designer
BJ
Bob Johnson
QA Engineer
Disabled
React
Vue
OverflowSet
Resize the container to see overflow
With far-side items
TimePicker
Default (24h, 30-min)
12-hour AM/PM
Business hours (15-min)
Palette
Brand / Theme
themeDarker
#004578
themeDark
#005a9e
themeDarkAlt
#106ebe
themePrimary
#0078d4
themeSecondary
#2b88d8
themeTertiary
#71afe5
themeLight
#c7e0f4
themeLighter
#deecf9
themeLighterAlt
#eff6fc
Neutrals
black
neutralDark
neutralPrimary
neutralSecondary
neutralTertiary
neutralQuaternary
neutralLight
neutralLighter
neutralLighterAlt
white
Status
red
orange
yellow
green
teal
blue
purple
magenta
Typography
tiny — 10px
small — 12px
medium — 14px (default)
mediumPlus — 16px
large — 18px
xLarge — 20px / semibold
xxLarge — 28px / semibold
superLarge — 42px
Elevation
depth 0
depth 4
depth 8
depth 16
depth 64
Spacing
--spacingS2 — 4px
--spacingS1 — 8px
--spacingM — 16px
--spacingL1 — 20px
--spacingL2 — 32px