UI Alerts & Toasts Catalog

Fifteen named feedback patterns — inline alerts, page banners, toast stacks, and empty/error callouts. Northstar Outfitters / Harbor Studio booking desk. See CATALOG.md for recipes.

.at-alert-info

Inline Info Alert

Icon, optional title, body, and optional link — polite status tone.

Check-in tip

Harbor Studio keys are in the lockbox after 3pm. View access notes

.at-alert-success

Inline Success Alert

Booking confirmed tone with short confirmation copy.

Booking confirmed

Cedar Ridge Hut · Fri–Sun. Confirmation sent to your email.

.at-alert-warn

Inline Warning Alert

Weather / trail advisory with optional learn-more link.

Trail advisory

High winds expected on Ridge Path after noon. See conditions

.at-alert-danger

Inline Danger Alert

Error tone with dismiss control (data-at-dismiss).

.at-alert-stack

Alert Stack

Vertical rhythm of mixed inline alerts in one column.

Waitlist opens Friday for Spring shoulder dates.

Ice on the spur trail — microspikes recommended.

Deposit received for Pine Lookout Hut.

.at-toast-stack

Toast Stack

Corner host with trigger buttons — stacks up to four, auto-dismiss ~4s.

Click to spawn toasts in the corner.

.at-toast-rich

Rich Toast

Title + body + Undo action — static sample and one live trigger.

Removed from waitlist

Pine Lookout · May 12–14

.at-toast-progress

Progress Toast

Auto-dismiss progress bar along the bottom edge; pauses on hover.

.at-empty

Empty State

Illustration placeholder, heading, short copy, primary CTA.

No hut bookings yet

Browse available nights and hold a spot at Harbor Studio or Cedar Ridge.

.at-error-panel

Error Panel

Icon, heading, detail, Retry + Contact support.

.at-error-inline-form

Form-Adjacent Error

Validation summary list above fake booking fields.