Alerts
Alerts and toasts communicate important messages like success, error, warning, or info. Alerts are prominent and need immediate attention, while toasts are less intrusive and disappear quickly.
Documentation
Code
Status & Change logs
4.13.26
None-breaking
Added Alerts/Toasts component to the ELF Design System with two distinct layout categories.
Added Timestamp category: displays a time label and close button in the header with two action buttons in the body.
Added Actionable category: displays a primary action button in the header with a timestamp label in the body.
Added eight toast status icon variants: Error, Alert, Info, Success, Avatar, Spinner, Upload, and Download.
Added configurable progress bar with percentage and three label positions: Right, Left, and None.
Added animated Spinner icon using a circular progress indicator with
spin keyframe animation.Added Avatar icon displaying user initials inside a brand-blue circle badge.
Added
ElfAlert Flutter component with full prop API for category, status, title, body, progress, and actions.2.20.26
None-breaking
Updated alert card border-radius from
8px to 12px to align with the ELF card system.Improved body text indentation to
28px to correctly align with the title after the status icon.Updated progress bar track color from
#EBEBEB to #F5F5F5 for consistency with Button disabled state.Quality of life change: Spinner animation duration reduced from
1s to 0.7s to feel more responsive.Breaking
Renamed
category: time-stamp to category: timestamp — removed hyphen to align with ELF prop naming convention.12.10.25
None-breaking
Added Progress Bar Label position option — label can now appear to the Right, Left, or be hidden (None).
Added Upload and Download as two new toast status icon variants.
Updated alert card shadow from a single layer to a two-layer shadow for improved depth.
Breaking
Removed
status: warning — merged into status: alert to reduce icon redundancy across the system.10.22.25
None-breaking
Quality of life change: Avatar icon now reads initials from the active user session rather than requiring manual input.
Linked all toast status icon instances to the Instance swap property, which will reset overrides when changing icon type.
Updated Secondary action button colors to use
backgroundSecondary token.Overview
Alerts and Toasts are notification components used to surface important information to users. Alerts appear inline within the UI and persist until dismissed, while toasts are transient and auto-dismiss. Both support body content, a progress bar, action buttons, and eight distinct status icon types to match the severity or nature of the message.
Category Timestamp · Actionable
Toast Status Error · Alert · Info · Success · Avatar · Spinner · Upload · Download
Progress 0% – 100%
Label Position Right · Left · None
Anatomy
1
2
3
Title
4
12:39 PM
5
6
Add body content here
7
30%
8
Action
Action
1 Alert Container
2 Status Icon
3 Title
4 Timestamp / Action
5 Close Button
6 Body Text
7 Progress Bar
8 Action Buttons
Categories
Title
Add body content here
20%
Title
Get Started
Add body content here
20%
Toast Status Icons
Usage Guidelines
Do
Use the status icon that matches the semantic meaning — Error for failures, Success for completions.
Use Actionable category when the primary goal is a single quick action from the user.
Keep titles concise and scannable — under 6 words where possible.
Show progress bar when the alert relates to an async operation with a known completion percentage.
Always include a close button so users can dismiss the notification on their own terms.
Don't
Don't stack multiple alerts simultaneously — it creates visual overload and dilutes urgency.
Avoid using the Error icon for warnings that don't require immediate user action.
Don't use vague body copy like "Something went wrong" — be specific about what happened.
Don't place more than two action buttons in the footer — use Actionable category instead.
Avoid showing a progress bar at 0% or 100% without updating the alert state accordingly.
Alert Variants
Category
Toast Status
Progress
Progress Bar Label
Artboard
Code