An alert gives users an important message about their current task within the context of a screen.

When to use

Use an alert:

  • to tell users about something that relates to what they're currently doing
  • to let users know that something needs their attention
  • when the message is temporary (and not a permanent part of the screen)

Don't use an alert:

  • if the message needs to be permanently on the screen (use normal copy instead)
  • if the message relates to a single form field

Types of alert

There are 4 different types of alert — neutral, positive, warning, and negative.

Each has a different use case.

A neutral alert
A positive alert
A negative alert
A warning alert
Best practice
  • Keep the message short and succinct.
  • Mind your tone with negative and warning alerts.
  • Don’t make an alert dismissible if the message is critical.
  • Don’t have more than one alert on the screen.
  • Only include an action when the user needs to go somewhere to fix the issue or find out more.


Alerts are contextual, so place them in close proximity to the issue or task they relate to.

If you’re using the alert to communicate information about the application as whole, place it in the top section of the screen.


Users can only interact with alerts that include an action, or that they can dismiss.


The action lets users navigate to another screen where they can perform a task or get more information.

If the alert includes an action, it makes the whole component tappable on Android and iOS, as well as on desktop and mobile web touchscreen devices. 

On web, the action text is also clickable and underlined, so it works for click-based interactions too — like using a mouse or keyboard.


Most alerts don’t need to be dismissible. But this functionality can be useful if we know that a user has seen the information before and may want to dismiss it.

If you choose to make an alert dismissible, you’ll need to consider what happens after it’s been dismissed.

Should the alert stay dismissed indefinitely, or reappear next time the user logs in or revisits the same screen?

Does the alert dismiss across all platforms? For example, if the user dismisses the alert on desktop, but then logs in using one of our apps, should it already be dismissed there too?



Message copy should:

  • clearly explain what the user needs to know and do

  • be brief — 1 or 2 short sentences is ideal, but 3 is ok if it makes the message clearer

  • be plain text — that means no links or other formatting (but small bits of bold are ok for

  • highlighting important details like dates or names)

  • have no title or paragraph breaks

  • be written in full sentences

  • have a full stop at the end

A warning alert with a short and clear message.

Action (optional)

Action copy should:

  • make it clear what will happen if the user taps or clicks

  • start with a verb — like ‘See’, ‘Add’, ‘Enable’

  • be around 1-3 words long

  • be in sentence case

  • have no full stop

Avoid using the phrase ‘Learn more’. It’s vague and doesn’t tell the user anything about where they’ll go if.

If you need to say ‘Learn more’ — like when linking to a help article — provide an aria-label on web. This gives more context to people using screenreaders.

An alert with long action copy
An alert with succinct action copy.

Writing for different alert types

Each alert type has a different use case — sometimes you might be giving the user good news, and sometimes it might be a warning, or bad news. Depending on the alert type you use, adjust your tone to match the scenario, and how the user will be feeling.

A positive alert with an upbeat message.
A negative alert with a clear, straightforward message.






Web documentation