Figma alert components

An alert is the message that does not go away. A trial ending in three days, a payment method that failed last night, a workspace stuck in read-only while an import finishes: all of them belong in the page, above the thing they affect, until somebody deals with them. That permanence is the entire difference between this component and the ones that slide into a corner and leave.

Alert or notification

The two words get swapped around freely and they should not be. An alert is inline and persistent, anchored to the page or section it describes, and it waits. A notification is transient, arrives in a corner, and dismisses itself. The W3C's alert pattern makes the same case from the accessibility side, noting that an alert should not disappear on its own, since anyone reading slowly or listening to a screen reader needs the message to still be there. One rule follows from that: if the message contains something the user has to act on, it must not be able to vanish while they look away. Banners handle the promotional cousin of this pattern, which is a different job with different rules, and anything that must block the interface until it is answered is a modal rather than an alert.

Six colors doing semantic work

The color property covers default, brand, gray, error, warning, and success. Error and warning are the pair to be disciplined about: error means something failed or will fail without intervention, warning means proceed carefully. Teams that use red for both end up with users who have learned to ignore red, and that habit is expensive to reverse. Color also cannot carry the meaning alone, since the red you chose is not red to everyone looking at it, so the heading has to say plainly what happened. Gray and default exist for messages that carry no state at all, which is a larger share of them than most designers expect.

Floating card or full-width banner

The size property is really about scope. The floating version is a contained card, 1,216px on desktop and 343px on mobile, meant to sit inside a content column beside whatever it refers to. The full-width version runs the whole 1,440px desktop frame and 375px on mobile, edge to edge, which is right for anything affecting the entire session: billing, an outage, scheduled maintenance. Reaching for the full-width banner to carry a section-level message is the most common misuse of this component. It is loud by design, and volume spent on small news is volume you no longer have when the news is big.

Wording, and being heard

An alert is mostly copy. Nielsen Norman Group's error message guidelines put placement first, close to whatever caused the problem, and plain language second, which rules out most of what a backend hands you. Say what happened, then what to do next, and keep the action in a button rather than buried in the sentence. On the build side, an alert appearing after the page has loaded needs to be announced without stealing focus, which is exactly what WCAG's status messages criterion asks for. Skip that and a keyboard user discovers the failed payment whenever they happen to tab past it.

When it's time to build, the same alerts exist in code. Untitled UI React alerts are open source, built with Tailwind CSS and React Aria, with dismissal and the live region semantics handled for you.