Tabs on mobile


Full support for tabs on mobile clients is coming soon. To prepare for this change you should follow the this guidance when creating your tabs. Personal apps (static tabs) are currently available in developer preview. and channel / group chat tabs are available in the ... overflow menu for the tab.

When full support for tabs is released:

  • All tabs will always be available on mobile
  • Your contentUrl will be loaded in the mobile Teams client.
  • For channel/group tabs, users can still open your tab in a separate browser via your websiteUrl, however your contentUrl will be loaded first.
  • If your tab uses authentication, you must upgrade your Teams JavaScript SDK to version 1.4.1 or later, or authentication will fail.

Custom tabs can be part of a channel, group chat, or personal app (apps that contain static tabs and/or a one-to-one bot).

Personal apps are available on mobile clients in the App Drawer. The app can only be installed from a desktop or web client, and can take up to 24 hours to appear on mobile clients.

Group and channel tabs are available on mobile clients as well. The default behavior is currently to use your websiteUrl to launch your tab in a browser window. However, they can be loaded on a mobile client by clicking the ... overflow menu next to the tab and choosing Open, which will use your contentUrl to load the tab inside the Teams mobile client.

mobile app drawer

Developer considerations for mobile support

When you're building an app that includes a tab, you need to consider (and test) how your tab will function on both the Android and iOS Microsoft Teams clients. The sections below outline some of the key scenarios you need to consider.

Testing on mobile clients

You need to validate that your tab functions properly on mobile devices of various sizes and qualities. For Android devices you can use the DevTools to debug your tab while it is running. We recommend that you test on both high and low performing devices, as well as on a tablet.

Responsive design

Because your tab can be opened on devices with a wide range of screen sizes, it needs to follow responsive design principles. All of the key constructs should be accessible on mobile devices, and the views should not be distorted. Ensure that when your tab is loaded on a mobile device, all buttons and links are easily accessible using finger-based navigation.


For authentication to work on mobile clients, you must upgrade you Teams JS SDK to at least version 1.4.1.

Low bandwidth & intermittent connections

Mobile clients regularly need to function with low bandwidth and intermittent connections. Your app should handle any timeouts appropriately by providing a contextual message to the user. You should also user progress indicators to provide feedback to your users for any long-running processes.

Design considerations for mobile

Our mobile platform allows apps to be an immersive experience with the app content taking up all of the screen apart from main Teams navigation. To create an immersive experience that fits seamlessly within the Microsoft Teams client, follow the guidelines below.


Choosing the correct layout for your tab is important. You should consider the kind of information you're presenting, and choose a layout that organizes it for easy consumption. Some potential options are outlined below.

Single canvas

This is one large area where work gets done. The Wiki app follows this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.

single canvas layout


Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.

list layout


Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.

grid layout

Tabs with bots on mobile

The below is an example personal app that contains two static tabs and a bot.

tabs and bots on mobile

UI Components

Color palettes

Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Since Teams mobile has two colour themes (light and dark), it’s a good idea to make sure your app looks great in both.

Light color

light color palette

Dark color

dark color palette

Buttons and controls

The way buttons are styled helps communicate what kind of action they trigger. We maintain a wide range of buttons that are formatted to show different levels of emphasis. Buttons can have text, an icon, or a combination of text and an icon. To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.


selection controls

chiclets and pills


Typography should be clear and purposeful. Emphasize important information and avoid using multiple fonts and sizes to reduce confusion. We recommend using sentence case and avoiding the usage of all caps for localization and legibility.

mobile typograph

Fields and Flyouts

Fields are areas where users can input text. Flyouts are more lightweight than dialogs, and appear from the top pane.

List controls

mobile list controls

Field controls

mobile field controls