Alert

npx shadcn@latest add https://4af.selfsimilar.dev/r/alert.json

import { Alert } from "@/components/ui/alert";

<Alert variant="success">Changes saved.</Alert>
<Alert variant="loading">Checking availability…</Alert>

API⠋

Main export: Alert

An inline status line: a glyph and a sentence, with no surface, border, or padding. It renders nothing for an empty message.

Variants⠋

import { Alert } from "@/components/ui/alert";

<Alert>Could not save your changes.</Alert>
<Alert variant="warning">Sending will notify all 240 members.</Alert>
<Alert variant="success">Changes saved.</Alert>
<Alert variant="info">We'll only use this to send receipts.</Alert>
<Alert variant="loading">Checking availability…</Alert>

The inks match Badge's status colours. The loading glyph is hidden from assistive technology, so only the sentence is announced.

The glyph sits in the same 14px slot in every variant, so changing variant does not shift the text. loader={<MySpinner />} overrides LoaderProvider.

Field errors⠋

Use Badge for a status on a row. When an alert describes a field, connect them:

<Input
  aria-invalid={Boolean(error)}
  aria-describedby={error ? "email-error" : undefined}
/>
<Alert id="email-error">{error}</Alert>