Alert
Introduction
Displays brief, important, and highly visible messages to keep users informed about system events, success statuses, warnings, or errors without interrupting active workflows or requiring immediate layout blocks.
The Alert component is fully integrated as an alert block in the Page Builder, enabling content editors and administrators to quickly configure layouts, messaging, icon indicators, and severity statuses directly inside the Sveltia CMS page templates.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Success Message (Subtle Variant)
Used to notify users about positive events, completions, or successfully processed forms (e.g., "Account Created", "Changes Saved").
{
"type": "alert",
"status": "success",
"variant": "subtle",
"title": "Changes Saved",
"description": "Your profile changes and document uploads have been successfully processed."
}
Changes Saved
2. Dynamic Warning Callout (Solid Variant)
Draws attention to potential issues or actions that require caution (e.g., "Plan Expiring soon", "System Maintenance scheduled").
{
"type": "alert",
"status": "warning",
"variant": "solid",
"title": "Approaching Storage Limit",
"description": "Your workspace has used 85% of allocated file capacity. Upgrade plan to avoid system freezes."
}
Approaching Storage Limit
3. High-Priority Error / Failure (Outline Variant)
Informs the user of critical failures, expired credentials, or transaction errors that block progress.
{
"type": "alert",
"status": "error",
"variant": "outline",
"title": "Connection Terminated",
"description": "The analytics engine timed out while pulling data. Check database credentials and try again."
}
Connection Terminated
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Title (title) | string | - | Bold header text displayed on the top line of the alert block. |
Description (description) | string | - | Detailed body message containing supplementary context or action instructions. |
Severity Status (status) | select | "info" | Sets the semantic layout color and default indicator icon. • Options: "success", "warning", "error", "info", "neutral". |
Visual Variant (variant) | select | "subtle" | Controls layout borders and container background density. • "subtle" — Light translucent backdrop color (best for generic content). • "solid" — Dense, opaque, highly saturated backdrop. • "outline" — Transparent background paired with a thin, color-matched border. |
Aria Live Setting (aria-live) | select | "polite" | Screen reader priority announcement mode. • "polite" — Announces the message when the user becomes idle. • "assertive" — Immediately interrupts screen-reader activity (use sparingly for errors). |
Developer Notes & Accessibility
- Server-Side Rendered Icons: To prevent hydration mismatch warnings and optimize asset delivery, the semantic
AlertIconis dynamically compiled into an inline, highly optimized SVG depending on the chosenstatusprop. - WAI-ARIA Accessibility: Alerts automatically feature the
role="alert"attribute to notify assistive technologies upon mounting. The defaultaria-liveparameter is set to"polite"to ensure user tasks are not assertively broken. - Layout Flow Integration: Designed as block-level container layouts. If nested inside flexible grid directories, the alert container will automatically expand horizontally to snap smoothly with existing column boundaries.