Fabric UI components examples

Fabric

A user interface element for selecting a display theme

• Theme settings

Fabric

A user interface component displaying storage usage and credit information with a call to action.

• Progress indicator

Fabric

A dropdown menu displaying content management actions and view settings.

• Dropdown menu

Fabric

A breadcrumb navigation displaying a file path with a back button.

• Breadcrumb

Fabric

An empty state screen prompting the user to add their first item, featuring various application and file icons floating above the text.

• Empty state

Fabric

A modal dialog for saving an item to a selected space or folder, featuring a search bar and options to create a new space.

• Modal

Fabric

A user interface displaying a timeline header with navigation and a row of filter dropdowns.

• Sorting & filtering

Fabric

• Pricing section

Fabric

An AI chat interface displaying a conversation between a user and an AI assistant, detailing saved items and their organization.

• Artificial intelligence

Fabric

• Toggle/Switch

Fabric

An AI assistant interface providing a summary of a note and offering various actions, with an input field for further queries.

• Artificial intelligence

Fabric

A dropdown menu with a filter input for selecting content blocks in a text editor.

• Rich text editor