caliper uidocs
DemoSign inGet Pro

Alert

Free

An inline message that keeps context and recovery beside the work.

Installs components/ui/alert.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/alert.json

When to use #

Use it for

  • A state needs attention and the person can act on it right where they are.
  • Errors that should offer a retry, with the draft still safe.

Skip it when

  • The message is a passing confirmation; use a toast.
  • The message blocks a decision; use a dialog.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/alert.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Alert } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export function SyncFailed() {
  const [busy, setBusy] = useState(false);
  return (
    <div className="w-full max-w-md">
      <Alert
        title="Couldn't sync changes"
        variant="error"
        loading={busy}
        action={
          <Button size="sm" variant="secondary" onClick={() => { setBusy(true); setTimeout(() => setBusy(false), 1200); }}>
            Retry
          </Button>
        }
      >
        Your draft is safe. Try syncing it again.
      </Alert>
    </div>
  );
}

API reference #

Alert

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
title *ReactNode—
variantFeedbackVariant"neutral"
loadingbooleanfalse
actionReactNode—
onDismiss(() => void)—

Accessibility #

It is built on native elements and keeps aria-busy, aria-atomic, aria-labelledby, aria-label and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.