Alert

Inline feedback messages for displaying contextual information, warnings, and errors

The Alert component displays inline, contextual feedback messages. It supports four semantic variants, an optional dismiss button, and composable title/description sections.

Import

import { Alert, AlertTitle, AlertDescription } from '@nim-ui/components';

Basic Usage

Heads up!

This is an informational alert message.

Code

<Alert variant="info">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>This is an informational alert message.</AlertDescription>
</Alert>

Variants

Four semantic variants communicate different levels of importance.

Info

A new software update is available.

Success

Your changes have been saved successfully.

Warning

Your session will expire in 5 minutes.

Error

There was a problem processing your request.

Code

<Alert variant="info">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>A new software update is available.</AlertDescription>
</Alert>

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your session will expire in 5 minutes.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>There was a problem processing your request.</AlertDescription>
</Alert>

Dismissible

Add a close button with the dismissible prop.

function DismissibleAlert() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <Alert variant="warning" dismissible onDismiss={() => setVisible(false)}>
      <AlertTitle>Warning</AlertTitle>
      <AlertDescription>This alert can be dismissed.</AlertDescription>
    </Alert>
  );
}

Props

Name	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'destructive'`	`'info'`	Visual style variant of the alert
`dismissible`	`boolean`	`false`	Show a close button to dismiss the alert
`onDismiss`	`() => void`	-	Callback when the dismiss button is clicked
`className`	`string`	-	Additional CSS classes

AlertTitle

Renders an <h5> element with semibold styling. Accepts all standard heading attributes.

AlertDescription

Renders a <p> element with relaxed line height. Accepts all standard paragraph attributes.

Accessibility

Uses role="alert" for screen reader announcements
Dismiss button includes aria-label="Dismiss alert"
Close icon uses aria-hidden="true"

Toast — Temporary notification messages
Alert Dialog — Modal confirmation dialog