Alert & notification
Inline alerts and toast notifications for surfacing feedback, confirmations, and system messages. Alerts come in two icon styles (ring and box), two layouts (card and banner), and five semantic colours. Toasts are portal-rendered to the bottom-right corner of the viewport and auto-dismiss after 5 s.
Card — ring icon
Inline card alert with the ring icon style. The icon sits alongside two radiating pseudo-element rings, giving a soft depth-of-focus feel. Available in five semantic colours.
We've just released a new feature
You can now invite team members to collaborate in real-time on any project.
We've just released a new feature
You can now invite team members to collaborate in real-time on any project.
Just to let you know this might be a problem
Your team has exceeded 80% of the monthly active user limit. Consider upgrading.
There was a problem with that action
We couldn't process your request. Please try again or contact support.
Your changes have been saved
The project settings were updated successfully and are now live.
Card — box icon
Same card layout with the box icon style — the icon lives inside a tinted, inset-shadow container, drawing the eye directly to the intent of the message.
We've just released a new feature
You can now invite team members to collaborate in real-time on any project.
We've just released a new feature
You can now invite team members to collaborate in real-time on any project.
Just to let you know this might be a problem
Your team has exceeded 80% of the monthly active user limit. Consider upgrading.
There was a problem with that action
We couldn't process your request. Please try again or contact support.
Your changes have been saved
The project settings were updated successfully and are now live.
Card with actions
Pass action buttons into the actions slot. Combine a primary CTA with an optional ghost dismiss action for maximum flexibility.
We've just released a new feature
Invite your team to collaborate in real-time. Try it free for 14 days.
Just to let you know this might be a problem
Your subscription is due to expire in 3 days. Renew now to avoid interruption.
Your changes have been saved
Version 3.2.1 is now live. You can roll back at any time from the releases page.
Banner
Full-width bar intended for top-of-page placement. The icon is hidden on small screens and the text truncates to keep the layout compact. Pair with a fixed container for persistent notifications.
We've just released a new feature.
Upgrade your plan to unlock real-time collaboration.
Just to let you know this might be a problem.
Your storage is nearly full. Free up space or upgrade.
There was a problem with that action.
Service degradation detected. Our team is working on a fix.
Your changes have been saved.
All team members have been notified.
Toast notification
Toasts appear from the bottom-right corner of the screen and auto-dismiss after 5 seconds. Wrap your layout in <ToastProvider> and call useToast().addToast() from any child component. Pass duration: 0 for a persistent toast.