Skip to content
Nim UI

Alert

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

Default Alert

View 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.

Alert Variants

View 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

Alert

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