| title | author | description | ms.author | ms.localizationpriority | ms.topic | ms.date |
|---|---|---|---|---|---|---|
Design App with Advanced UI Components |
heath-hamilton |
Learn about the Teams UI components, such as breadcrumbs, notification bar, Stageview along with relevant use cases. |
surbhigupta |
medium |
reference |
05/17/2023 |
The following components are a combination of basic UI components that you can use for common Teams design situations, such as navigation.
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.
[!div class="nextstepaction"] Get the Microsoft Teams UI Kit (Figma)
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.
- Communicate hierarchy
- Navigation
:::image type="content" source="../../assets/images/ui-templates/mobile-breadcrumb.png" alt-text="Example shows a breadcrumb template on mobile.":::
:::image type="content" source="../../assets/images/ui-templates/breadcrumb.png" alt-text="Example shows a breadcrumb template on desktop.":::
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.
- Browse multiple pages within a Teams tab.
- Break down complex apps into multiple pages.
:::image type="content" source="../../assets/images/ui-templates/mobile-left-nav.png" alt-text="Example shows a left nav template on mobile.":::
:::image type="content" source="../../assets/images/ui-templates/left-nav.png" alt-text="Example shows a left nav template on desktop." lightbox="../../assets/images/ui-templates/left-nav.png":::
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).
You can implement a notification bar using the Fluent UI alert component.
- Critical messages, errors, and warnings
- Success messages
- Informational or promotional messages
:::image type="content" source="../../assets/images/ui-templates/mobile-notification-bar.png" alt-text="Example shows notification bar UI template on mobile.":::
:::image type="content" source="../../assets/images/ui-templates/notification-bar.png" alt-text="Example shows notification bar UI templates on desktop.":::
Stageview lets users see content—like an image, file, or website—on a large surface in Teams without switching context. This component is primarily for viewing content. Don't use it for complex interactions.
See how to implement Stageview.
- Display content in a large surface within Teams instead of another app or browser
- Spotlight media or other rich content
Your app can launch a stage from an Adaptive Card, shared link, or visual components (such as a chart).
:::image type="content" source="../../assets/images/ui-templates/mobile-stage.png" alt-text="Example shows a stage template on mobile.":::
:::image type="content" source="../../assets/images/ui-templates/stage.png" alt-text="Example shows a stage template on desktop." lightbox="../../assets/images/ui-templates/stage.png":::
A toolbar is a container for grouping a set of controls.
- Contextual actions on app content.
- Contextual filter and find.
- Navigation and breadcrumbs.
:::image type="content" source="../../assets/images/ui-templates/mobile-toolbar.png" alt-text="Example shows a toolbar template on mobile.":::
:::image type="content" source="../../assets/images/ui-templates/toolbar.png" alt-text="Example shows a toolbar template on desktop.":::