microsoft · vnbaaij · Dec 30, 2025 · Dec 22, 2025 · Dec 22, 2025 · Dec 22, 2025
@@ -1,6 +1,8 @@
 ---
 title: Accordion
 route: /Accordion
+category: 20|Components
+icon: TextCollapse
 ---
 
 # Accordion

@@ -1,6 +1,7 @@
 ---
 title: Avatar
 route: /Avatar
+icon: Person
 ---
 
 # Avatar

@@ -1,6 +1,7 @@
 ---
 title: Badge
 route: /Badge
+icon: Tag
 ---
 
 # Badge

@@ -1,6 +1,6 @@
 ---
 title: AnchorButton
-route: /Button/AnchorButton 
+route: /Buttons/AnchorButton 
 ---
 
 # AnchorButton

@@ -1,7 +1,7 @@
 ---
 title: Button
 order: 0001
-route: /Button/Button
+route: /Buttons/Button
 ---
 
 # Button

@@ -1,6 +1,6 @@
 ---
 title: CompoundButton
-route: /Button/CompoundButton 
+route: /Buttons/CompoundButton 
 ---
 
 # CompoundButton

@@ -1,9 +1,10 @@
 ---
-title: Buttons
-route: /Button/[Default]
+title: Button components
+route: /Buttons/[Default]
+icon: Button
 ---
 
-# Buttons
+# Button components
 
 The **Button** components allow users to commit a change or trigger an action via a single click
 or tap and is often found inside forms, dialogs, drawers (panels) and/or pages.

@@ -1,6 +1,6 @@
 ---
 title: MenuButton
-route: /Button/MenuButton
+route: /Buttons/MenuButton
 ---
 
 # MenuButton

@@ -1,6 +1,6 @@
 ---
 title: SplitButton
-route: /Button/SplitButton
+route: /Buttons/SplitButton
 ---
 
 # SplitButton

@@ -1,6 +1,6 @@
 ---
 title: ToggleButton
-route: /Button/ToggleButton
+route: /Buttons/ToggleButton
 ---
 
 # ToggleButton

@@ -1,6 +1,7 @@
 ---
 title: Card
 route: /Card
+icon: ContactCard
 ---
 
 # Card

@@ -1,6 +1,7 @@
 ---
 title: Checkbox
 route: /Checkbox
+icon: CheckboxChecked
 ---
 
 # Checkbox

@@ -1,8 +1,8 @@
 ---
 title: My Counter (Test)
 category: 90|Labs
-icon: Regular.ArrowBetweenUp
 route: /Test/Counter
+icon: Beaker
 ---
 
 # My Counter Page

@@ -1,9 +1,10 @@
 ---
 title: CounterBadge
 route: /CounterBadge
+icon: NumberCircle5
 ---
 
-# CouterBadge
+# CounterBadge
 
 The `CounterBadge` component is a visual indicator that communicates a numerical count.
 It uses numbers, color, and icons for quick recognition and is placed near the relavant content.

@@ -1,6 +1,7 @@
 ---
 title: DataGrid
 route: /DataGrid/[Default]
+icon: Table
 ---
 
 # DataGrid

@@ -1,6 +1,7 @@
 ---
 title: Date and Time pickers
 route: /DateTime/[Default]
+icon: Calendar
 ---
 
 # Date and Time pickers

@@ -1,6 +1,7 @@
 ---
 title: Dialog
 route: /Dialog
+icon: AppGeneric
 ---
 
 # Dialog

@@ -1,6 +1,7 @@
 ---
 title: Drawer (Panel)
 route: /Drawer
+icon: PanelRight
 ---
 
 # Drawer (Panel)

@@ -1,6 +1,7 @@
 ---
 title: MessageBox
 route: /MessageBox
+icon: WindowHeaderHorizontal
 ---
 
 # MessageBox

@@ -1,6 +1,7 @@
 ---
 title: Divider
 route: /Divider
+icon: DividerShort
 ---
 
 # Divider

@@ -1,6 +1,7 @@
 ---
 title: Drag and Drop
 route: /Drag
+icon: Drag
 ---
 
 # Drag and Drop

@@ -1,6 +1,7 @@
 ---
 title: Emoji
 route: /Emoji
+icon: EmojiSmileSlight
 ---
 
 # Emoji

@@ -1,6 +1,7 @@
 ---
 title: Error Boundary
 route: /ErrorBoundary
+icon: DocumentError
 ---
 
 # Error Boundary

@@ -1,6 +1,7 @@
 ---
 title: Field
 route: /Field
+icon: TextField
 ---
 
 # Field

@@ -1,6 +1,7 @@
 ---
 title: Grid
 route: /Grid
+icon: SlideGrid
 ---
 
 # Grid

@@ -1,6 +1,7 @@
 ---
 title: Highlighter
 route: /Highlighter
+icon: Highlight
 ---
 
 # Highlighter

@@ -1,6 +1,7 @@
 ---
 title: Icon
 route: /Icon
+icon: Icons
 ---
 
 # Icon

@@ -1,6 +1,7 @@
 ---
 title: Image
 route: /Image
+icon: Image
 ---
 
 # Image

@@ -1,6 +1,7 @@
 ---
 title: InputFile
 route: /InputFile
+icon: ArrowUpload
 ---
 
 # InputFile

@@ -1,6 +1,7 @@
 ---
 title: KeyCode
 route: /KeyCode
+icon: Keyboard
 ---
 
 # KeyCode

@@ -1,6 +1,7 @@
 ---
 title: Label
 route: /Label
+icon: DoorTag
 ---
 
 # Label

@@ -1,6 +1,7 @@
 ---
 title: Layout
 route: /Layout
+icon: ContentViewGallery
 ---
 
 # Layout

@@ -1,6 +1,7 @@
 ---
 title: Link
 route: /link
+icon: Link
 ---
 
 # Link

@@ -1,6 +1,6 @@
 ---
-title: List / Combobox
-route: /List/Combobox
+title: Combobox
+route: /Lists/Combobox
 ---
 
 # Combobox

@@ -0,0 +1,12 @@
+---
+title: List components
+route: /Lists/[Default]
+icon: ListBar
+---
+# List components
+
+List components are used to display a collection of items. We currently provide the following list components:
+- [FluentSelect](/Lists/Select): A dropdown list that allows users to select one or more options from a predefined list.
+- [FluentCombobox](/Lists/Combobox): A combination of a dropdown list and an input field that allows users to select from a list or enter their own value.
+
+
@@ -1,6 +1,6 @@
 ---
-title: List / Select
-route: /List/Select
+title: Select
+route: /Lists/Select
 ---
 
 # Select

@@ -1,6 +1,7 @@
 ---
 title: Menu
 route: /Menu
+icon: LineHorizontal1Dot
 ---
 
 # Menu

@@ -1,6 +1,7 @@
 ---
 title: MessageBar
 route: /MessageBar
+icon: WindowHeaderHorizontal
 ---
 
 # MessageBar

@@ -6,7 +6,7 @@ icon: Navigation
 
 # Nav
 
-Nav, or navigation, provides a list of links that lets people move through the main sections of an app or site. Itâs a high-level wayfinding component thatâs always easily accessible but can be minimized to free up space.
+Nav, or navigation, provides a list of links that lets people move through the main sections of an app or site. Its a high-level wayfinding component thats always easily accessible but can be minimized to free up space.
 
 Nav only supports one level of nesting and might not show all available items.
 
@@ -18,7 +18,7 @@ Navs can be organized with up to two levels of hierarchy. Simple navs list the s
 
 Create a simple nav using nav items. These are first-level links that give people a quick understanding of the main parts of an experience.
 
-Create a complex nav using nav categories and sub-items. Nav categories expand and collapse so people only see the information they need. Nav sub-items group related links within that category and let people navigate to those sub-pages. Nav categories act as accordions and show or hide information; theyâre not links and wonât lead to site or app locations.
+Create a complex nav using nav categories and sub-items. Nav categories expand and collapse so people only see the information they need. Nav sub-items group related links within that category and let people navigate to those sub-pages. Nav categories act as accordions and show or hide information; theyre not links and wont lead to site or app locations.
 
 By using the `UseSingleExpanded` parameter, you can ensure that only one nav category is expanded at a time. When a new category is expanded, any previously expanded category will automatically collapse.
 

@@ -1,6 +1,7 @@
 ---
 title: Paginator
 route: /Paginator
+icon: ArrowNext
 ---
 
 # Paginator

@@ -1,6 +1,7 @@
 ---
 title: Popover
 route: /Popover
+icon: TooltipQuote
 ---
 
 # Popover

@@ -1,6 +1,7 @@
 ---
 title: ProgressBar
 route: /progress-bar
+icon: SquareHint
 ---
 
 # ProgressBar

@@ -1,6 +1,7 @@
 ---
 title: Spinner
 route: /spinner
+icon: ArrowClockwiseDashes
 ---
 
 # Spinner

@@ -1,6 +1,7 @@
 ---
 title: Radio
 route: /Radio
+icon: RadioButton
 ---
 
 # RadioGroup and Radio

@@ -1,6 +1,7 @@
 ---
 title: RatingDisplay
 route: /rating-display
+icon: Star
 ---
 
 # Rating display

@@ -1,6 +1,7 @@
 ---
 title: Skeleton
 route: /Skeleton
+icon: Shortpick
 ---
 
 # Skeleton