Skip to content
Atelier
Alert
Displays a callout for user attention.
Default
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Usage notes
General-purpose alerts for neutral status updates.
Use for confirmations, tips, or low-risk notices.
Keep copy short; include a clear next step if needed.
Destructive
Unable to process your payment.
Please verify your billing information and try again.
Check your card details
Ensure sufficient funds
Verify billing address
Usage notes
Errors, blocked actions, or data-loss risk.
Strong destructive for critical failures; regular for detailed guidance.
Pair with recovery steps or support links.
Informational
Informational alert
Use this to provide helpful context without urgency.
Usage notes
Neutral guidance or supporting context.
Use for usage notes, tips, and documentation links.
Keep the tone calm and concise.
Primary
Primary strong alert
Use this for the highest-emphasis brand callout.
Primary soft alert
Use this for supportive guidance that should stay calm.
Primary alert
Use this to highlight important information with subtle chrome.
Usage notes
Brand emphasis for the main callout.
Use strong primary for the key message; soft for supportive guidance.
Limit to one per view to preserve hierarchy.
Secondary
Secondary strong alert
Use this when a supporting alert needs more emphasis.
Secondary soft alert
Use this when you want a softer supporting callout.
Secondary alert
Use this for supporting or follow-up information.
Usage notes
Supporting or follow-up information.
Use strong secondary when it must stand alone.
Soft secondary keeps hierarchy under a primary alert.
Tertiary
Tertiary strong alert
Use this when neutral guidance needs a bit more weight.
Tertiary soft alert
Use this for quiet, low-priority guidance.
Tertiary alert
Use this for neutral callouts or subtle emphasis.
Usage notes
Neutral callouts that should not dominate.
Use strong tertiary for subtle emphasis; soft for optional notes.
Avoid stacking with higher-emphasis alerts.
Quaternary
Quaternary strong alert
Use this for high-contrast, playful highlights.
Quaternary soft alert
Use this for light, low-stakes highlights.
Quaternary alert
Use this for contrast-heavy highlights.
Usage notes
Accent or playful highlights.
Use strong quaternary for playful highlights; soft for friendly nudges.
Avoid for critical or error states.
Warning
Warning strong alert
Immediate attention required before you can proceed.
Warning soft alert
Use this for early or low-impact cautionary notices.
Heads up! Your session is almost expired.
Save your work to avoid losing changes when the session ends.
Usage notes
Cautionary alerts with potential impact.
Strong warning for immediate attention; soft for early notices.
Use clear, specific language and explain how to avoid it.
Danger
Danger strong alert
Use this for confirmed failures or critical risk.
Danger soft alert
Use this to warn gently about risky actions.
Danger alert (alias for destructive).
Use this when you want the destructive styling with a danger label.
Usage notes
High-risk or destructive outcomes.
Strong danger for confirmed failures; soft for gentle risk warnings.
Require confirmation or an escape path.
Success
Success strong alert
Use this to celebrate a completed milestone.
Success soft alert
Use this for calm confirmation or progress feedback.
Success! Your profile is up to date.
Everything looks good. No further action is required.
Usage notes
Positive outcomes and completed actions.
Strong success for celebratory confirmations; soft for calm progress updates.
Avoid overusing in multi-step flows.