Design guidelines for modals

Modals are focused spaces that appear atop the Slack UI. They can be opened after a user invokes your app, and are dismissed when a user submits its contents or clicks Cancel.

An example of modals in desktop and mobile clients

Keep modals glanceable

Whatever the modal's content, the end-user shouldn’t need to spend excessive time on a single view within a modal. Rather than overloading a view, your app should use inputs sparingly, and implement pagination as necessary — generally when there are upwards of six inputs or blocks of information.

Indicate outcome

Your app should indicate what happens upon a modal submission. For example, if a message will be posted into a channel on the users behalf, it should be evident.

Show progress

If your app needs to perform resource-intensive data fetching, you should implement a temporary loading screen so the user better understands what's happening. This is especially important to consider as your app is installed on larger teams with even larger collections of data.

Don’t prompt for login information

Users should not be prompted for confidential information like passwords within modals (or any app surface area, for that matter). When your app needs access to a user’s credentials, you should direct them to your login and store any necessary information on your app’s backend.

Use cases

  • Collecting input from users

  • Displaying lists or results

  • Confirming a user’s action

  • Onboarding a user to your app