Alert Component

The Alert component is used to display important messages to users. It supports multiple variants for different message types.

Basic Usage

import { Alert, AlertTitle, AlertDescription } from 'nebula-ui';
 
export default function Example() {
  return (
    <Alert variant="success">
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>
        Operation completed successfully!
      </AlertDescription>
    </Alert>
  );
}

Variants

Alerts come in several variants:

default: Informational alert
success: Success message (green)
warning: Warning message (yellow)
error: Error message (red)

<Alert variant="default">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>This is an informational message</AlertDescription>
</Alert>
 
<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Operation completed successfully!</AlertDescription>
</Alert>
 
<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Please review your input</AlertDescription>
</Alert>
 
<Alert variant="error">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong</AlertDescription>
</Alert>

Without Title

You can use alerts without a title:

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

Props

Alert Props

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	Visual variant
`children`	`ReactNode`	-	Alert content

AlertTitle Props

Prop	Type	Description
`children`	`ReactNode`	Title text

AlertDescription Props

Prop	Type	Description
`children`	`ReactNode`	Description text

Accessibility

The Alert component is fully accessible:

Proper role="alert" attribute
Screen reader support
Clear visual indicators
Semantic HTML structure

Examples

Form Validation

{error && (
  <Alert variant="error">
    <AlertTitle>Validation Error</AlertTitle>
    <AlertDescription>{error}</AlertDescription>
  </Alert>
)}
 
{success && (
  <Alert variant="success">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Form submitted successfully!</AlertDescription>
  </Alert>
)}

Dismissible Alert

const [showAlert, setShowAlert] = useState(true);
 
{showAlert && (
  <Alert variant="warning">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      This action cannot be undone.
      <button onClick={() => setShowAlert(false)} className="ml-2 underline">
        Dismiss
      </button>
    </AlertDescription>
  </Alert>
)}

Multiple Alerts

<div className="space-y-4">
  <Alert variant="success">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Operation completed</AlertDescription>
  </Alert>
  <Alert variant="warning">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>Please review your settings</AlertDescription>
  </Alert>
</div>

Best Practices

Use appropriate variants - match the alert type to its purpose
Provide clear titles - help users understand the message quickly
Keep descriptions concise - long messages can be overwhelming
Use sparingly - alerts should be for important messages only
Consider dismissible alerts - for non-critical messages