Skip to content
Aback UI

Feedback

Alert

Inline status messages for information, success, warning, and destructive feedback.

StableUsed in Aback LaunchRegistry JSON (opens in a new tab)

Registry update available

Version 0.2 adds three components and a revised focus ring.

Deployment complete

abackui.com is serving the latest build.

Usage limit approaching

You have used 82% of this month's build minutes.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add alert

Writes components/ui/alert.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

API reference

Props and composition points for Alert. Native element props pass through.

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "destructive" | "muted""info"Sets the semantic tone and surface. It never changes the accessible role.
role"alert" | "status"NoneSet explicitly. Use alert for an error that interrupts, and status for a confirmation.
classNamestringNoneLayout adjustments only. Do not override the semantic colors.

Dependencies: class-variance-authority, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Every variant pairs color with an icon and a visible title, so meaning is never carried by hue alone.
  • Error messages should use role alert and sit next to the control or action that caused them.
  • A static informational alert needs no live role; adding one announces content on first paint.
  • Description text inherits the variant color, which meets AA on its tinted surface.

Used in production

The Aback products whose interfaces shaped this component.

Related