Presentation
Alerts
A centered modal carrying one title, one line of body copy, and one or two actions — the lightbox's zoom-settle entrance applied to a decision instead of media.
Findings
What's actually in /ig
- --modal-backdrop-default:rgba(0,0,0,.65) and --modal-border-radius:12px are real, general-purpose modal tokens. Alert-specific destructive treatment derives from the existing --ig-error action colour rather than a separate alert border or icon treatment.
Rationale
Why this component exists
Alerts interrupt, and the system's only interrupt-grade entrance is the lightbox's combined opacity+scale zoom-settle (Ease Confident) — sheets slide up for contextual tasks, alerts zoom in for decisions. The destructive action borrows --ig-error directly rather than introducing a new red, keeping every destructive surface in the system the same colour.
Usage
When to use it
Use when
A decision or failure must block the current flow until acknowledged — deleting a post, confirming a sign-out.
Avoid when
The message is informational and non-blocking (use a toast-equivalent inline message) or the content needs more than two lines of body copy (use a Panel).
Anatomy
Anatomy
- 01
Backdrop (rgba(0,0,0,.65))
- 02
Centered surface (12px radius)
- 03
Title
- 04
Body copy (1–2 lines)
- 05
Action row (1–2 buttons)
Specification
Spacing, colour, type, and motion
- Surface radius
- var(--modal-border-radius) — 12px
- Backdrop
- rgba(0,0,0,.65) — var(--modal-backdrop-default)
- Entrance
- opacity 0→1, scale .96→1, Ease Confident — see Motion
- Destructive action
- rgb(var(--ig-error)) text on a transparent or tertiary button
- Body type
- system-14, rgb(var(--ig-secondary-text))
States
States
| State | Behaviour |
|---|---|
| Entering | Backdrop fades in; surface scales from .96 to 1 over Ease Confident. |
| Open | Focus trapped inside the surface; backdrop dismisses on outside press unless destructive. |
| Dismissed | Reverse of entrance, shortened to match the system's faster exit convention. |
Examples
Real interface compositions
Destructive decision
Delete post confirmation
A centered surface asks 'Delete this post?' with one supporting sentence and Cancel/Delete actions; Delete uses the system error colour while focus stays trapped until a choice is made.
--modal-backdrop-default, 12px modal radius, --ig-error action, alertdialog semantics
Guidance
Usage guidance
- Build alerts on the same modal tokens as everything else — the alert distinction comes from content and action semantics, not a separate visual shell.
Accessibility
Accessibility
- Use role="alertdialog" with the title as the accessible name, and trap focus for the duration the alert is open.
- Never make outside-press dismiss the only way to close a destructive alert — always pair it with an explicit Cancel action.
Do / Don't
Do / Don't
Do
- Reuse --modal-border-radius and --modal-backdrop-default rather than inventing alert-specific tokens.
Don’t
- Add a bespoke alert colour treatment that isn't backed by --ig-error or --ig-success.
See also