Home

FS.FluentUI Wiki

I have done my best to keep the usage of the following components/hooks as similar to the Microsoft documentation as possible.

None of these examples will be all-encompassing, so please check the official documentation for further specifics.

NOTE: Any use of Fui.stack in these examples is preferential and is imported from FS.FluentUI.V8toV9, which is a separate package. A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components. A StackItem abstracts those properties that are or can be specifically applied on flexbox's children, like grow and shrink.

Styling and Theming

---

• FluentProvider / BrandVariants
• makeStyles
• makeResetStyles
• bundleIcon
• tokens
• typographyStyles
• Themes
• mergeClasses

Buttons and Form Inputs

---

• Button
• CompoundButton
• MenuButton
• SplitButton
• ToggleButton
• Checkbox
• Combobox / Option
• Dropdown / OptionGroup
• Field
• Input / Label
• Link
• Radio / RadioGroup
• Select
• Slider
• SpinButton
• TextArea
• Switch
• Icon
• SearchBox
• SwatchPicker / renderSwatchPickerGrid
• TagPicker / useTagPickerFilter

Compat Components

• DatePicker (w/ TODO)
• Calendar
• TimePicker

Lists, Grids, and Trees

---

• DataGrid / createTableColumn
• Virtualized DataGrid
• Table
• Tree
• FlatTree / useHeadlessFlatTree_unstable

Menus and Navigation

---

• Accordion
• Menu
• Tab / TabList

Surfaces

---

• Card
• Dialog
• Divider
• Popover / Positioning
• Portal
• Toolbar
• Toast / useToastController
• Skeleton
• MessageBar / MessageBarGroup
• Drawer
• TeachingPopover
• Carousel

Display and Status

---

• Avatar
• AvatarGroup / partitionAvatarGroupItems
• Badge
• CounterBadge
• PresenceBadge
• Image
• Persona
• ProgressBar
• Spinner
• Tag / TagGroup
• InteractionTag
• Text
• Tooltip
• InfoLabel
• InfoButton
• Breadcrumb / partitionBreadcrumbItems
• Rating / RatingDisplay

Utilities

---

• Overflow / Overflow Hooks
• useArrowNavigationGroup
• useFocusableGroup
• useFocusFinders
• useKeyboardNavAttribute
• useModalAttributes
• useId
• createPresenceComponent
• createMotionComponent

Preview Components / Hooks

---

• Virtualizer / useStaticVirtualizerMeasure
• VirtualizerScrollView
• VirtualizerScrollViewDynamic

Deprecated

• Alert