Alert When to useTypes of alertActions and linksBest practicePlacementInteractionContentPlaygroundAvailabilityAvatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinner Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnerPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Alert

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

Alert
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
  • for network or system errors (use an error screen or error state instead)

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
Actions and links

An alert can include an optional link for further information or an action(s).

Single action

A single action alert is for when there is only one action to be completed.

Single action alert

Multiple actions

Multiple alerts are for when an alert has multiple actions to save from the user having multiple overwhelming alerts being displayed. When a user clicks on the alert a list of actions will come up in a bottom sheet. Each alert should be grouped by type.

Multiple action alert

Link

When there is no immediate action but there is a link associated with the alert that may direct the user to more info use a link.

Link 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.

Placement

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.

Interaction

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

Action

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.

Dismiss

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?

Content

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'll need to adapt our tone of voice to suit the scenario and message.

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

Message

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.
Playground
Availability

Platform

Available

Android

iOS

Web

Web documentation