🔲
Confirm action
This is a standard modal window. Use it for confirmations, notifications and
details. Close — Escape or click the overlay.
🚀
Welcome!
Primary modal with themed overlay. For onboarding, promo and key action steps.
✅
Success!
Your request has been completed. Data saved without errors. Overlay coloured green
via CSS variables.
❌
Something went wrong
Error processing the request. The overlay is colored red via
color-mix(). Try again or contact support.
⚠️
Warning!
This action cannot be undone. The overlay is colored amber. Use for
warnings and destructive operations.
ℹ️
Information
Info modal with teal-tinted overlay. For hints, updates and
neutral notifications.
🔑
Sign In
Enter your login credentials
Email
📧
Password
🔒
🔹
Small modal
max-width: 340px. Compact and focused — ideal for quick confirms.
🔲
Large modal
max-width: 620px. A wider canvas for richer content — feature announcements,
media, long policy text, or step-by-step instructions. You have plenty of horizontal room to work with.
Combine with
.is-primary or any other color variant.🗑️
Delete project?
This will permanently remove the project and all associated data. This action
cannot be undone.