Feedback

System feedback. Alert is a static banner, Spinner an inline loading indicator, Skeleton a content placeholder. Status colors are system-only (never brand decoration).

Alert

Order submitted to the ERP.

Projected billing exceeds the plan threshold.

Extraction failed — check the source document.

Dismiss

3 items are awaiting review.

<Alert type="error" message="Extraction failed." dismissible />

type: success | warning | error | info. dismissible adds a close button. role="alert".

Spinner

Inherits currentColor (set the parent’s text color). Sizes sm | md | lg.

Skeleton

<Skeleton width={120} height={16} />
<Skeleton circle height={32} />

Decorative (aria-hidden); pulses, and respects prefers-reduced-motion. Width defaults to 100% (or the height, when circle).

Toast

successerrorwarninginfo

import { ToastContainer, showToast } from '@repo/ui/Toaster';

// Mount once (e.g. in the app shell):
<ToastContainer />
// Then anywhere:
showToast({ kind: 'success', title: 'Order submitted' });
showToast({ kind: 'error', title: 'Failed', action: { label: 'Retry', onClick: retry } });

Imperative, nanostores-backed (no provider). Auto-dismiss (5s default; durationMs: 0 to keep), max 3 per corner with FIFO drop, optional action, top-right/bottom-left. Each toast is a role="status" live region. Promoted from the app’s implementation; supersedes the legacy toast object at cutover.

Do / don’t

• Do use Alert for persistent context and Toast for transient confirmations.
• Don’t use status colors decoratively — they signal state.
• Do match Skeleton shapes to the content they stand in for.