Redigera

Dela via

Designing your Microsoft Teams app with basic Fluent UI components

  • Artikel

You can design and build your Teams app from scratch with the following basic Fluent UI components. Designed as flat as possible, these components can work across different use cases, themes, and screen sizes.

The illustrations on this page show how components look in Teams default (light) and dark themes.

Microsoft Teams UI Kit

Based on Fluent UI react components, the Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. In the UI kit, you can grab and insert the components listed here directly into your design and see more examples of how to use each component.

Get the Microsoft Teams UI Kit (Figma).

Alert

Example shows an alert UI component.

Button

Example shows a button UI component.

Example shows a breadcrumb UI component.

Card

Example shows a card UI component.

Example shows a carousel UI component.

Checkbox

Example shows a checkbox UI component.

Coachmark

Example shows a coachmark UI component.

Contextual menu

Example shows a contextual menu UI component.

Dialog

Example shows a dialog UI component.

Example shows a dropdown UI component.

Group list

Example shows a group list UI component.

Example shows a hyperlink UI component.

Input

Example shows an input UI component.

Key value pair

Example shows a key value pair UI component.

Paragraph

Example shows a paragraph UI component.

Picker

Example shows a picker UI component.

Pivot

Example shows a pivot UI component.

Progress indicator

Example shows a progress indicator UI component.

Radio

Example shows a radio UI component.

Scrollbar

Example shows a scrollbar UI component.

Example shows a search box UI component.

Side panel

Example shows a side panel UI component.

Status label

Example shows a status label UI component.

Toast

Example shows a toast UI component.

Toggle

Note: In Fluent UI, toggle is a type of checkbox.

Example shows a toggle UI component.

Tooltip

Example shows a tooltip UI component.

Other resources

Get code samples and implementation details for some of the components listed here and in the Microsoft Teams UI Kit.

Try the Fluent UI react components