design-teams-app-basic-ui-components.md

title	author	description	ms.localizationpriority	ms.topic	ms.date
Design Apps with Microsoft Teams UI Kit	heath-hamilton	Learn how to use UI components from Teams UI kit such a Fluent kit, breadcrumb, button card, carousel, dropdown, and toggle to build Teams apps.	medium	reference	05/17/2023

Designing your Microsoft Teams app with basic Fluent UI components

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.

[!div class="nextstepaction"] Get the Microsoft Teams UI Kit (Figma).

Alert

:::image type="content" source="../../assets/images/components/alert-button.png" alt-text="Example shows an alert UI component." lightbox="../../assets/images/components/alert-button.png":::

Button

:::image type="content" source="../../assets/images/components/button.png" alt-text="Example shows a button UI component." lightbox="../../assets/images/components/button.png":::

Breadcrumb

:::image type="content" source="../../assets/images/components/breadcrumb.png" alt-text="Example shows a breadcrumb UI component." lightbox="../../assets/images/components/breadcrumb.png":::

Card

:::image type="content" source="../../assets/images/components/card.png" alt-text="Example shows a card UI component." lightbox="../../assets/images/components/card.png":::

Carousel

:::image type="content" source="../../assets/images/components/carousel.png" alt-text="Example shows a carousel UI component." lightbox="../../assets/images/components/carousel.png":::

Checkbox

:::image type="content" source="../../assets/images/components/checkbox.png" alt-text="Example shows a checkbox UI component." lightbox="../../assets/images/components/checkbox.png":::

Coachmark

:::image type="content" source="../../assets/images/components/coachmark.png" alt-text="Example shows a coachmark UI component." lightbox="../../assets/images/components/coachmark.png":::

Contextual menu

:::image type="content" source="../../assets/images/components/contextual-menu.png" alt-text="Example shows a contextual menu UI component." lightbox="../../assets/images/components/contextual-menu.png":::

Dialog

:::image type="content" source="../../assets/images/components/dialog.png" alt-text="Example shows a dialog UI component." lightbox="../../assets/images/components/dialog.png":::

Dropdown

:::image type="content" source="../../assets/images/components/dropdown.png" alt-text="Example shows a dropdown UI component." lightbox="../../assets/images/components/dropdown.png":::

Group list

:::image type="content" source="../../assets/images/components/group-list.png" alt-text="Example shows a group list UI component." lightbox="../../assets/images/components/group-list.png":::

Hyperlink

:::image type="content" source="../../assets/images/components/hyperlink.png" alt-text="Example shows a hyperlink UI component." lightbox="../../assets/images/components/hyperlink.png":::

Input

:::image type="content" source="../../assets/images/components/input.png" alt-text="Example shows an input UI component." lightbox="../../assets/images/components/input.png":::

Key value pair

:::image type="content" source="../../assets/images/components/key-value-pair.png" alt-text="Example shows a key value pair UI component." lightbox="../../assets/images/components/key-value-pair.png":::

Paragraph

:::image type="content" source="../../assets/images/components/paragraph.png" alt-text="Example shows a paragraph UI component." lightbox="../../assets/images/components/paragraph.png":::

Picker

:::image type="content" source="../../assets/images/components/picker.png" alt-text="Example shows a picker UI component.":::

Pivot

:::image type="content" source="../../assets/images/components/pivot.png" alt-text="Example shows a pivot UI component." lightbox="../../assets/images/components/pivot.png":::

Progress indicator

:::image type="content" source="../../assets/images/components/progress-indicator.png" alt-text="Example shows a progress indicator UI component." lightbox="../../assets/images/components/progress-indicator.png":::

Radio

:::image type="content" source="../../assets/images/components/radio.png" alt-text="Example shows a radio UI component." lightbox="../../assets/images/components/radio.png":::

Scrollbar

:::image type="content" source="../../assets/images/components/scrollbar.png" alt-text="Example shows a scrollbar UI component." lightbox="../../assets/images/components/scrollbar.png":::

Search box

:::image type="content" source="../../assets/images/components/searchbox.png" alt-text="Example shows a search box UI component." lightbox="../../assets/images/components/searchbox.png":::

Side panel

:::image type="content" source="../../assets/images/components/side-panel.png" alt-text="Example shows a side panel UI component.":::

Status label

:::image type="content" source="../../assets/images/components/status-label.png" alt-text="Example shows a status label UI component." lightbox="../../assets/images/components/status-label.png":::

Toast

:::image type="content" source="../../assets/images/components/toast.png" alt-text="Example shows a toast UI component." lightbox="../../assets/images/components/toast.png":::

Toggle

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

:::image type="content" source="../../assets/images/components/toggle.png" alt-text="Example shows a toggle UI component." lightbox="../../assets/images/components/toggle.png":::

Tooltip

:::image type="content" source="../../assets/images/components/tooltip.png" alt-text="Example shows a tooltip UI component." lightbox="../../assets/images/components/tooltip.png":::

Other resources

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

[!div class="nextstepaction"] Try the Fluent UI react components