Component

Alert

Use the default polite status for routine updates. Set role="alert" only for messages that require immediate attention.

Preview

Changes saved

Your settings are now up to date.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add alert

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Alert, AlertTitle, AlertDescription } from '@nimjs/ui';

export function Example() {
  return (
    <Alert><AlertTitle>Saved</AlertTitle><AlertDescription>Changes are ready.</AlertDescription></Alert>
  );
}

System metadata

Registry

alert

Category: feedback

Status: preview

Version marker: 0.0.0 (unreleased)

Files

alert.tsx

Tokens

bordermutedforegroundmuted-foregroundradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

native semanticsscreen reader readable

Anatomy

Alert

Alert part of the alert component.

AlertTitle

AlertTitle part of the alert component.

AlertDescription

AlertDescription part of the alert component.

Usage patterns

basic use

Use status for polite updates; set role alert for urgent messages.

API and states

Use the default polite status for routine updates. Set role="alert" only for messages that require immediate attention.

Accessibility

The alert root announces its content through a status role. Keep the message concise.