Alerts & notifications
Messages the reader did not ask for: two page-bound alerts and three floating notifications, all stateless — onClose and onConfirm are yours to wire.
Alerts & notifications
Messages the reader did not ask for: two page-bound alerts and three floating notifications, all stateless — onClose and onConfirm are yours to wire.
Demo
Two families, one picker, each rail speaking the sheet’s axes: the Alert’s Color and Size, and the Notification’s Type.
Your trial ends in 3 days
Upgrade to keep your team’s projects and their history.
A handler is not a detail here
onClose is passed, and the confirm action only when onConfirm is.Contextual demo
An alert lives at a page’s edge and a notification on top of it, so both are judged in a screen, not a well.
The stacking is application code
The family
Two files and five exports. Nothing is compound: each takes a flat bag of strings and two handlers, no children.
| Component | Description | Import from |
|---|---|---|
| AlertFloating | A bordered card that sits inside page content: featured icon, title, description, and a row of link actions, with a close button in the corner. | @/components/application/alerts/alerts |
| AlertFullWidth | A bar across the top or bottom of a page. Same content, laid out as one row from 1024px, the description dropping under the title when the two do not fit, with actions that switch between buttons and links. | @/components/application/alerts/alerts |
| IconNotification | The default toast: featured icon, title, description, an optional progress bar, and two link actions. | @/components/application/notifications/notifications |
| AvatarNotification | A toast attributed to a person: avatar, name, timestamp, and what they said. | @/components/application/notifications/notifications |
| ImageNotification | A toast carrying a picture, beside the text from 768px up and under it below that. Fixes its own 496px width. | @/components/application/notifications/notifications |
Built from
Six kit pieces across the two files, all with their own docs page.
Component | Where it’s used here |
|---|---|
| FeaturedIcon | The glyph on both alerts and on IconNotification: a 40px white square at default, a 32px filled circle at every other color. |
| Button | Every action, at size sm — link buttons everywhere except the full-width bar’s button mode, which uses secondary and primary. |
| CloseButton | The corner control on all five; on the full-width bar it moves inline to the end of the action row from 768px up. |
| Avatar | AvatarNotification’s portrait at size md, with its status dot, online by default. |
| ProgressBar | The progress form’s bar, label below, running the full text column. |
| Icons | InfoCircle, AlertCircle, or CheckCircle by color; the icon prop overrides the mapping. |
Alerts
Two components across six colors, one across two action types. Live cells; the close buttons close nothing on purpose.
The dashboard view has changed
Pages and exports now load in about half the time.
Scheduled exports are now available
Send any report to your team on a weekly or monthly loop.
This project is read-only
You have view access. Ask an admin for edit access.
We couldn’t publish this project
Removing the last member unpublished it. Add a member first.
Your trial ends in 3 days
Upgrade to keep your team’s projects and their history.
Profile updated
Your changes are saved and your team can see them.
The dashboard view has changed
Pages and exports now load in about half the time.
Scheduled exports are now available
Send any report to your team on a weekly or monthly loop.
This project is read-only
You have view access. Ask an admin for edit access.
We couldn’t publish this project
Removing the last member unpublished it. Add a member first.
Your trial ends in 3 days
Upgrade to keep your team’s projects and their history.
Profile updated
Your changes are saved and your team can see them.
The dashboard view has changed
Pages and exports now load in about half the time.
Scheduled exports are now available
Send any report to your team on a weekly or monthly loop.
This project is read-only
You have view access. Ask an admin for edit access.
We couldn’t publish this project
Removing the last member unpublished it. Add a member first.
Your trial ends in 3 days
Upgrade to keep your team’s projects and their history.
Profile updated
Your changes are saved and your team can see them.
Color moves the icon and nothing else
default is the one value that changes its shape as well: a 40px bordered white square where the other five draw a 32px filled circle (since 2026-08-22; they drew two faint rings before).Notifications
Six colors, each cell carrying its sheet Type’s own scenario, plus the progress, no-icon, person, and picture forms.
Version 1.4.1 is now available
Includes the all new dashboard view. Pages and exports will now load faster.
We’ve just released a new update
Check out the all new dashboard view. Pages and exports now load faster.
Autosave is paused
Reconnect to keep editing. Changes stay on this device.
This project has been unpublished
Removing all users has unpublished this project. Add users to republish.
This project has been unpublished
Removing all users has unpublished this project. Add users to republish.
Successfully updated profile
Your changes have been saved and your profile is live. Your team can make edits.
Uploading ‘website-FINAL06.fig’
Please wait while we upload your file.
Updates have been made to your profile
Your team has made changes to your company profile since you last logged in.
Katherine Moss
2 mins agoI’ve finished adding my notes. Happy for us to review whenever you’re ready.
We’ve just released a new update
Check out the all new dashboard view. Pages and exports now load faster.
Every cell above sets its own width
IconNotification and AvatarNotification take their width from a --width custom property that falls back to 400px, and it only applies from 600px up. Below that they fill whatever holds them. ImageNotification is the exception: it sets --width: 496px on itself.States
Neither family has a state of its own. The buttons inside respond, and the one value that animates is the progress bar.
Scheduled exports are now available
Send any report to your team on a weekly or monthly loop.
Scheduled exports are now available
Send any report to your team on a weekly or monthly loop.
Uploading ‘website-FINAL06.fig’
Please wait while we upload your file.
Uploading ‘website-FINAL06.fig’
Please wait while we upload your file.
Uploading ‘website-FINAL06.fig’
Please wait while we upload your file.
Nothing here is a disclosure