bloomkitAlert
Contextual feedback banners that communicate status through color, icon, and structured content. Supports four semantic variants with automatic icons.
Heads up
This is an info alert with some additional context.
Installation
npm install @bloomkit/reactUsage
import { Alert, AlertTitle, AlertDescription } from "@bloomkit/react";
<Alert variant="info">
<AlertTitle>Note</AlertTitle>
<AlertDescription>Your session will expire in 10 minutes.</AlertDescription>
</Alert>Variants
<Alert variant="info">
<AlertTitle>Info</AlertTitle>
<AlertDescription>Here is some useful information.</AlertDescription>
</Alert>
<Alert variant="success">
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>
<Alert variant="warning">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action cannot be undone.</AlertDescription>
</Alert>
<Alert variant="error">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | "info" | Visual style and semantic meaning of the alert |
| className | string | "" | Additional Tailwind classes (merged via tailwind-merge) |
| children | ReactNode | — | Alert content — use AlertTitle and AlertDescription |