Alert

Use to provide general context or neutral information, such as announcements or guidance that don't indicate a status outcome, in either filled or outlined style.

Use to confirm that an action or process has completed successfully. Reassures users that their input was accepted in either filled or outlined style.

Use to communicate errors or critical failures that require immediate attention. Reserve for situations that could block the user, in either filled or outlined style.

Use to flag potential issues that may need attention. Cautions the user without blocking them from proceeding, in either filled or outlined style.

Use when the message carries no particular status or urgency, such as simple notices or reminders, in either filled or outlined style.

Use filled alerts when the message needs stronger visual emphasis, such as higher-priority updates or messages users should notice immediately.

Use outlined alerts for messages that should stay visible with less visual weight. They work well as the default style when the message does not need to dominate the page.

Use for persistent messages that must remain visible, such as system statuses or warnings the user needs to act on.

Use for non-critical messages the user can close after reading, such as informational banners or one-time notices.

Use when the message is self-explanatory or when a minimal, text-only appearance is preferred.

Use to reinforce the alert's meaning with a recognisable visual cue. The icon should support, not replace, the message text.

Use for short, single-line messages that are easy to scan without an additional heading.

Use when the alert contains longer or more detailed content that benefits from a clear summary heading.

Use when the alert message is complete without extra supporting content.

Use the default slot to include supplementary content such as links, descriptions, or supporting actions below the main message.