Variants
Default
This is a default alert with no status.
Solid
This is a solid alert with inverted colors.
Status
Error
Invalid email or password. Please try again.
Success
Your account has been created successfully.
Warning
Your session will expire in 5 minutes.
Info
A verification email has been sent to your inbox.
Props
| Prop | Type | Description |
|---|---|---|
| variant | "default" | "solid" | Background treatment |
| status | "error" | "success" | "warning" | "info" | Semantic color (overrides variant background) |
| className | string | Additional classes on the root element |
Usage
<Alert status="error">
<Alert.Title>Error</Alert.Title>
<Alert.Description>Invalid credentials.</Alert.Description>
</Alert>
<Alert status="success">
<Alert.Title>Account created</Alert.Title>
<Alert.Description>Check your email to verify.</Alert.Description>
</Alert>