Skip to content
DOL Studio

Alert

Design: Stable Code: Coded feedbackstatusinline 7 Figma sets Alert/Complex block Alert

Live preview

Soft variant

5 tones — info / success / warning / danger / neutral. Tinted background + matching ink. Default variant — use for inline messages.
Info
Pagefind index rebuilds on every Astro build.
Success
All 50 E2E tests passed.
Note
Read-only metadata cache — last sync 2026-05-15.

Solid variant

High-contrast tone fill + white text. Use for high-priority system notices or banner-level announcements.
System notice
Maintenance window 02:00–04:00 UTC.
Deploy completed.
Read-only
Documentation snapshot view.

With action slot

Trailing `action` slot accepts a button or link. Sizes — `sm` for compact toasts / `md` (default) for inline notices.
Cache refresh available
New token values from yesterday's Figma push.

Import & files

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

Figma source

Figma source 7 sets
Page
Alert
Sets
7
Primary set
Alert/Complex block Alert · 32 variants Open in Figma →
Showing: Alert/Complex block Alert
6 other sets
  • .Alert/Simple tooltip/Element tooltip container 4 variants Figma →
  • .Alert/Simple tooltip/Size 4 variants Figma →
  • Alert/On screen Alert 16 variants Figma →
  • Alert/Simple block Alert 16 variants Figma →
  • Alert/Simple text Alert 4 variants Figma →
  • Alert/Simple tooltip Alert 24 variants Figma →

AI context

AI context

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

# Alert
Slug: `alert`
Domain: general · Category: feedback
Design: stable · Code: coded


## Description
Inline status block - info, success, warning, danger. Includes Simple-tooltip + Complex block variants.


## Import
```ts
import { Alert } from "@dol/ui/alert";
```
Source: `packages/@dol/ui/src/alert/Alert.tsx`


## Figma source
Page: Alert
Sets: 7
Primary: Alert/Complex block Alert
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=8348-90576

Related

  • Skeleton

    Coded
  • No items
    Add your first entry.

    Empty state

    Coded
  • 60%

    Progress

    Coded
  • Saved
    Changes committed.

    Toast

    Coded
  • 3

    Badge

    Coded
  • 3

    KidBadge

    KIDCoded

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).