Alert
Alerts communicate important messages and actions to users with visual indicators for different message types (info, success, warning, error).
Preview
Heads up!
You can add components to your app using the cli.
Success
Your settings have been saved successfully.
Warning
Your trial period is about to expire.
Error
Something went wrong. Please try again.
Usage
tsx
import { Alert, AlertTitle, AlertDescription } from '@e-infra/design-system'
<Alert variant="default">
<Info className="h-4 w-4" /> // Here add an icon from your own icon library
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>
<Alert variant="success">
<CircleCheck className="h-4 w-4" /> // Here add an icon from your own icon library
<AlertTitle>Success</AlertTitle>
<AlertDescription>Your settings have been saved.</AlertDescription>
</Alert>Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | success | warning | error | default | Visual style variant |
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
AlertDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
Variants
| Variant | Background | Border | Text |
|---|---|---|---|
| default | tertiary/50 | tertiary | panel-foreground |
| success | success/50 | success | success-foreground |
| warning | warning/50 | warning | warning-foreground |
| error | error/50 | error | error-foreground |