Overlays & Feedback
Notification
Toast-style cards for events that need attention, with icon, timer and dismiss.
Source captures·from the SEED early-access trailer
Election prompt
Frosted card with an unread dot, a countdown and an icon wrapped in a time-left arc.
Election for Mayor 4
Cast your vote
Time left to vote: 01h 06m
Tones & variants
Field ready to harvest
Farming Field · Enduring Greenhollow
Bridgit wants to talk
Ask Rasean about his injuries.
Ongoing care needed
Muscle Strain is getting worse
Untreated for 07d 01h
Live stack
Notifications count down every second, click to mark read, × to dismiss. They leave on their own when time runs out.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | ReactNode | — | |
| meta | { label, value } | — | Muted label with a bold value, e.g. a countdown. |
| icon | ReactNode | — | |
| tone | "orange" | "green" | "blue" | "red" | "orange" | |
| progress | number | — | 0–100 arc around the icon. |
| unread | boolean | — | |
| variant | "glass" | "solid" | "glass" | |
| onOpen / onDismiss | () => void | — |