Alert · 0nlyType

Example

Your trial ends on 14 October.

Choose a plan before then and nothing you've made will change.

Halden didn't publish.

Two images are over the 20 MB limit. Make them smaller, then publish again.

Sharing is paused tonight from 22:00 to 23:00.

Links you've sent keep working. New ones wait until it's back.

The review moved.

for ~~Thursday 2 October~~ read Friday 3 October

Same time, same room. Everyone invited has been told.

Double bar

Your trial ends on 14 October.

Error, the final bar

Halden didn't publish.

Cue

Sharing is paused tonight.

Errata

The review moved.

for ~~Thursday~~ read Friday

Cue, arriving

Sharing is paused tonight.

Usage

alert-example.tsx

import { Alert, AlertActions, AlertCorrection, AlertDescription, AlertTitle } from "@/components/ui/alert"import { Button } from "@/components/ui/button"export default function Example() {return (<div className="flex flex-col gap-10"><Alert><AlertTitle>Your trial ends on 14 October.</AlertTitle><AlertDescription>Choose a plan before then and nothing you&apos;ve made will change.</AlertDescription><AlertActions><Button variant="quiet">Choose a plan</Button></AlertActions></Alert><Alert variant="error"><AlertTitle>Halden didn&apos;t publish.</AlertTitle><AlertDescription>Two images are over the 20 MB limit. Make them smaller, then publish again.</AlertDescription><AlertActions><Button>Publish again</Button></AlertActions></Alert><Alert variant="cue"><AlertTitle>Sharing is paused tonight from 22:00 to 23:00.</AlertTitle><AlertDescription>Links you&apos;ve sent keep working. New ones wait until it&apos;s back.</AlertDescription></Alert><Alert variant="errata"><AlertTitle>The review moved.</AlertTitle><AlertCorrection was="Thursday 2 October" now="Friday 3 October" /><AlertDescription>Same time, same room. Everyone invited has been told.</AlertDescription></Alert></div>)}

Contract

Underneath: native.
Anatomy: <div class="ot-alert" role="status"> (or role="alert" for errors) holding .ot-alert-title, a sentence, and optional .ot-alert-actions. data-variant="error" for what went wrong. data-arriving plays the entrance.
A double bar, the sign in a score that something changes here. It draws down the margin, then the words arrive beside it in turn. Crimson only for an error, and then it says what to do. An error wears the final bar instead, thin then thick: what was happening stopped here.
cue (after "It has to be design."'s "Watch this space."): a hairline arrow runs in from the margin, clamp(40px, 12vw, 135px) long, and stops at the first word of the title, at its x-height. Arriving, the line draws from the start, the head lands, then the words arrive. Right to left, it comes in from the right. For a notice that stands across a page.
errata: the printer's errata slip. AlertCorrection sets "for was read now": the two in large italic (del and ins, so a screen reader hears the change), the one withdrawn stepped back to pencil, "for" and "read" small and upright between them on the same baseline. Arriving, the old words fade from ink to pencil and the new ones write in from the start. No bar.

Props

Props of Alert
Prop	Type	Default	What it does
`variant`	`"default" \| "error" \| "cue" \| "errata"`	`"default"`	Default: the double bar, role=status, said when the reader is next free. error: the final bar (thin, then thick) in the signal colour, role=alert, said at once; use it for what failed and say what to fix. cue: a hairline arrow runs in from the margin and stops at the first word, for a notice that stands across a page. errata: a correction, set with AlertCorrection as the printer's slip, for one fact that changed.
`arriving`	`boolean`	`false`	Draw the sign (the bar, or the cue's arrow; errata writes in the new word) and bring the lines in one by one. Set it when the alert appears because of something the person did.
`AlertTitle`	`p`		The headline, in a full sentence.
`AlertDescription`	`p`		One or two lines of detail.
`AlertCorrection`	`{ was: ReactNode; now: ReactNode }`		Errata only. "for was read now": the two in large italic, the old one stepped back to pencil, the small upright words between. Marked del and ins, so a screen reader hears the change.
`AlertActions`	`div`		A row for the next step, set as Buttons.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Alert	The score's double bar	Two bars down the margin; an error, the final bar
Cue alert	"It has to be design.": Watch this space	A hairline arrow runs from the margin to the words
Errata alert	A book's errata slip	"for was read now"

How it moves

How it moves
Component	Articulation	What moves
Alert	Double bar	The bars draw down, then the words arrive
Cue alert	Cue	The line draws in from the margin, the head lands, the words arrive
Errata alert	Written	The old words step back to pencil; the new ones write in