Components · Extended
Toasts & Notifications
A transient, non-blocking confirmation that appears, holds, and dismisses itself — for low-stakes feedback that doesn't need to interrupt the user. Not directly confirmed in captured CSS; derived from the system's modal elevation, motion, and copy rules already established elsewhere in this manual.
Live
Appears, holds, dismisses — the standard lifecycle
Slides down from the top edge, holds for 4 seconds, then fades out. The same lifecycle applies to every toast variant below.
Variants
Four toast types
Every variant shares the same capsule shape and motion — only the icon, message, and dismiss behaviour change.
Confirmation
Past tense, no punctuation, auto-dismisses. The most common toast type.
With action
Trailing action link for reversible operations. The action extends the auto-dismiss timer.
Error
Used only for transient, non-blocking failures — a blocking error uses Alerts, not a toast.
Upload progress
Persists until the operation completes — does not auto-dismiss on a timer.
Spec
Position, shape, and timing
Toasts use a dark capsule regardless of light/dark theme — the same theme-independent treatment as a HUD overlay on a photo, because a toast frequently floats over photo or video content where a theme-aware surface would be unreadable.
Position
Fixed, top-center, 16px from the safe area top edge
Shape
Pill (--radius-pill) for single-line; --radius-lg for two-line/action toasts
Background
rgba(--ig-always-black, 0.85) — theme-independent, like overlay controls on photo/video
Text colour
rgb(--ig-always-white) — pairs with the fixed dark background
Shadow
--shadow-elevated — same elevation tier as a modal, since a toast floats above all page content
Entrance
translateY(-16px) → 0 plus opacity 0 → 1, 250ms, --ease-settle
Hold duration
4000ms default; extends to 6000ms when an action link is present
Exit
opacity 1 → 0 over 200ms, --ease-glide — no slide on exit, fade only
Stacking
One toast visible at a time — a new toast replaces the current one rather than stacking a queue
.toast {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%) translateY(-16px);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--radius-pill);
background: rgba(var(--ig-always-black), 0.85);
color: rgb(var(--ig-always-white));
font-size: 14px;
font-weight: var(--fw-medium);
box-shadow: var(--shadow-elevated);
opacity: 0;
transition: transform 250ms var(--ease-settle), opacity 250ms var(--ease-settle);
z-index: var(--layer-10);
}
.toast[data-visible="true"] {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.toast[data-dismissing="true"] {
transition: opacity 200ms var(--ease-glide);
opacity: 0;
}Do
- Keep the message to 1-3 words for simple confirmations — 'Saved', 'Reported', 'Link copied' — see Voice & Writing's toast copy rules. Longer messages slow down a pattern meant to be glanced at, not read.
- Replace, don't stack — If a new toast fires while one is visible, replace it immediately rather than queueing — the user only needs the most recent status.
- Use the dark capsule regardless of theme — Toasts frequently appear over photo/video content (upload progress, share confirmations) where a theme-aware light surface would disappear against bright media.
- Persist upload/progress toasts until completion — Don't auto-dismiss a toast that's communicating an in-progress operation — only completed-action confirmations use the 4-second timer.
Don’t
- Don't use a toast for anything requiring a decision — If the user needs to choose between two options, that's an Alert or Action Sheet — a toast self-dismisses and can't wait for input.
- Don't put more than one action link in a toast — A single 'Undo' or 'View' link maximum — multiple actions belong in a richer surface.
- Don't rely on the toast alone for critical errors — A failed payment or account-security event needs a persistent, blocking surface — not a 4-second toast that can be missed.
- Don't animate the exit with a slide — Slide-in on entrance, fade-only on exit — a matching slide-out reads as slower and busier than necessary for a self-dismissing element.