Cena Research Institute | Cardiovascular Trial Site & CRO in Houston

Variants

Alerts support multiple variants to indicate different types of messages.

Default

This is a default alert message.

Success

Operation completed successfully.

Destructive

Error

Something went wrong.

Warning

Please review this information.

Dismissible

Alerts can be dismissible with a close button.

Dismissible Alert

Click the X to dismiss this alert.

Usage

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

export function MyComponent() {
  return (
    <Alert variant="success">
      <div className="flex gap-3">
        <AlertIcon variant="success" />
        <div>
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>Operation completed successfully.</AlertDescription>
        </div>
      </div>
    </Alert>
  );
}

Material 3 Features

Color Roles: Uses Material 3 error-container and on-error-container for destructive alerts
Surface Container: Uses surface-container-high for background
Borders: Subtle borders with opacity based on variant
Icons: Contextual icons for each variant type
Theme Support: Automatically adapts to light and dark themes