Designing your Microsoft Teams app with advanced UI components

The following components are a combination of basic UI components that you can use for common Teams design situations, such as navigation.

Microsoft Teams UI Kit

Based on Fluent UI, 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.

Breadcrumbs are a navigational aid that convey your app’s hierarchy. They help users understand how the page they’re viewing fits into the overall experience and afford one-click access to higher levels in that hierarchy.

Top use cases

  • Communicate hierarchy
  • Navigation

Left nav

Use the left nav to browse multiple pages within your Teams tab. In the following example, the left nav is between the channel list and tab content.

Top use cases

  • Browse multiple pages within a Teams tab.
  • Break down complex apps into multiple pages.

Notification bar

A notification bar is a dedicated area for displaying a brief, important messages that do not require the user to take immediate action. Specific background colors and icons are associated with specific types of messages (see below).

Top use cases

  • Critical messages, errors, and warnings
  • Success messages
  • Informational or promotional messages

Stage

Stage offers a way for users to open an entity—like an image, file, or website—in Teams instead of opening it in another app or browser. The primary use case of stage is viewing; the surface should not be used for complex interactions.

(Implementation note: Build your stage using a large task module.)

Top use cases

  • Open an entity in Teams instead of another app or browser
  • Spotlight media or other content

Example shows a stage template on desktop.

Toolbar

A toolbar is a container for grouping a set of controls.

Top use cases

  • Contextual actions on app content
  • Contextual filter and find
  • Navigation and breadcrumbs