Figma Alert & Notification

Preview

The Alert and Notification components display a short, meaningful message that explains the system's state/task without interrupting the user's flow by appearing at the bottom, top, or center of the interface.

The difference between an Alert and a Notification is their interaction requirements. An Alert requires immediate user action, commonly blocking user flow. While a Notification also requires user action, it can be dismissed without blocking any user's current task and can be dismissed by itself from the UI over time.

Alerts & Notification UI Best Practices

Use state colors and icons to differentiate between info, warning, and error states;
Auto-hide non-critical notifications after a set period, with the option to recall them back;
If you're using Toast and Notification simultaneously, make sure they occupy different places across the UI.

When to use Notification/Alerts vs. Toasts

Use Notifications and Alerts for important messages that require user attention or action, e.g., "Delete account" or "Confirm action";
Use Toasts for temporary, non-critical notifications that auto-dismiss, such as "Changes saved" or "Thanks for subscribing."

Alert & Notification Anatomy

Set	Variants	Properties
Alert	36	Type Informative, Success, Warning, Danger, Loading, InvertedSize Small, Medium, LargeExpanded False, TrueBooleans Buttons, Icon L, Icon R
AlertNotification	16	Size Medium, LargeState Informative, Success, Warning, DangerExpanded False, True
NotificationMobile	4	State Default, Expanded, Hover Default, Hover Expanded

Alert ships 36 variants — Informative, Success, Warning, Danger, Loading and Inverted types at 60, 72 and 92px heights, collapsed or expanded, with Buttons and left/right icon booleans — beside a 16-variant AlertNotification, a mobile NotificationMobile card and a NotificationItem row in three sizes with an Unread state.

Alert & Notification AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build an alert and notification system in Figma as four component sets. Alert: a full-width bar with a left status icon, a bold title, a one-line message and a close icon on the right, in six types — Informative blue, Success green, Warning amber, Danger red, Loading with a spinner, and Inverted on a dark fill — three sizes at 60, 72 and 92px, an Expanded boolean that reveals a description paragraph and a row of two buttons, plus booleans to show or hide the Buttons, the left icon and the right icon. AlertNotification: a floating rounded card version in Medium 60px and Large 80px with the four semantic states and the same Expanded toggle. NotificationMobile: a phone-width card with Default, Expanded, Hover Default and Hover Expanded states. NotificationItem: a list row with avatar, message and timestamp in 48, 56 and 64px heights, with Default and Unread states where Unread adds a dot and a tinted background. Bind every colour to semantic variables so the state palette stays consistent.

Source