Skip to content

Toast

Design: Stable Code: Coded feedbacktransientnotification 3 Figma sets 1 standalone Toast alert/Style 1

Live preview

Horizontal — 5 tones
Cache refresh available
New token values from yesterday's Figma push.
Saved
Your changes were committed.
Read-only
Metadata cache — last sync 2026-05-15.
With action slot
File moved
To Archive/.
Vertical orientation
Upload complete
12 files synced to storage.
Compact — sm, no icon
Auto-saved 2 seconds ago.

Import & files

Import
import { Toast } from "@dol/ui/toast";
Source file
packages/@dol/ui/src/toast/Toast.tsx

Figma source

Figma source 3 sets
Page
Toast
Sets
3 + 1 standalone
Primary set
Toast alert/Style 1 · 2 variants Open in Figma →
Showing: Toast alert/Style 1
2 other sets
  • Toast alert/Style 1 vertical 2 variants Figma →
  • Toast alert/Style 2 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source.

# Toast
Slug: `toast`
Domain: general · Category: feedback
Design: stable · Code: coded
## Description
Non-blocking transient notification. 3 sets: horizontal Style 1, vertical Style 1, plus Designlog variant.
## Import
```ts
import { Toast } from "@dol/ui/toast";
```
Source: `packages/@dol/ui/src/toast/Toast.tsx`
## Figma source
Page: Toast
Sets: 3
Primary: Toast alert/Style 1
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7605-78922
  • Notice

    Alert

    Coded
  • Skeleton

    Coded
  • No items
    Add your first entry.

    Empty state

    Coded
  • 60%

    Progress

    Coded
  • R
    bug-report

    Report

    Design only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).