Alert.
An Alert communicates important information, feedback, or status that requires the user's attention without necessarily interrupting their current task. Use it for success, information, warning and error messages, with the variant and emphasis reflecting how much the message matters. The key principle is: make important information visible and understandable without unnecessarily interrupting the user.
Variants
—infoinfosuccesswarningerrorThe Figma component pairs Variant with Filled. Filled=Yes is the higher-contrast treatment — reserve it for the single message on a screen that must not be missed; if everything is filled, nothing stands out. Colour never carries the meaning on its own: keep the leading icon and say the situation in the headline.
Styles & features
Four independent switches on top of severity — combine them as the message needs.
Anatomy
Do & don't
Accessibility
role="alert"Assertive — announced immediately. Use for problems that block the user.role="status"Polite — announced at the next pause. Use for confirmations and passive updates.FocusAn alert never moves keyboard focus. If the user must answer before continuing, it is a Dialog.No timersEssential alerts must not disappear on their own — timed messages exclude anyone who reads slowly.ColourNever the only cue. The icon and the wording must carry the state as well.ActionsAny control inside the alert must be reachable and operable by keyboard.On loadAlerts already on the page when it loads are not announced — render them dynamically if they matter.Props (React)
type AlertProps = {
severity: "primary" | "neutral" | "info" | "success" | "warning" | "error";
filled?: boolean; // higher-contrast treatment — one per screen
title?: string; // headline; omit for a single-line message
children: ReactNode; // message — plain language, says what to do next
icon?: IconName | false; // defaults per severity; false only in the minimal style
onClose?: () => void; // renders the close control — passive alerts only
action?: ReactNode; // one control, e.g. "Update price list"
role?: "alert" | "status"; // assertive for problems, polite for confirmations
};