UX/UI Design

How to Design Toasts and Alerts

Feedback is where most products go quiet. Toasts, alerts and banners each answer a different question, and mixing them up is why users miss errors. This guide covers anatomy, types, placement, timing, choosing the right one and the Figma setup.

Muhammad Saud Musaddiq4 min read

Anatomy

A toast is an icon, a one line message, an optional action and a dismiss control. Keep it to one sentence, 360 wide, padding 16 and radius 12.

CoversIconMessageActionDismiss

A toast redlined: icon, one-line message, optional action and dismiss control, 360 wide with 16 padding and a 12 radius.

Types

Four types are enough: success, info, warning and error. Colour carries the type, the icon repeats it for colour blind users and the message says what happened in plain words.

CoversSuccessInfoWarningError

The four toast types stacked: green success, blue info, amber warning and red error, each with its own icon.

Placement

Top right on desktop, bottom centre on mobile above the thumb zone. Never cover the control the user just pressed.

CoversDesktopMobileStacking

Toast placement compared: top right on a desktop window, bottom centre above the thumb zone on a phone.

Timing

Auto dismiss after 4 to 6 seconds for success and info. Errors and anything with an action stay until dismissed.

Covers4 to 6 sPersistentPause on hover

Timing rules: success and info auto-dismiss on a 4 to 6 second bar, errors and toasts with an action persist.

Toast, Alert or Banner

Toast for a result of something the user did, inline alert for a problem in the form they are filling, banner for a state that affects the whole page.

CoversToastInline alertBanner

The three side by side: a toast over a result, an inline alert inside a form field, and a full-width page banner.

Properties in Figma

Variants for type, booleans for action and dismiss, a text property for the message and a colour variable per type so a rebrand is one change.

CoversVariantsBooleansVariables

The Figma properties panel for one toast component: type variants, action and dismiss booleans, a message text property and a colour variable per type.

More notes