Alert
Alert components for displaying informational, error, success, and warning messages with icons and customizable styles.
Installation
The Alert component is part of the design system. Import it from the UI package.
import { Alert } from "@/components/ui/alert"Usage
Use Alert with a state (info, error, success, warning), optional size and type. You can copy the example below to get started.
The TXID is valid. Please proceed to the next step.
States
Alerts support four states: info, error, success, and warning. Each state has its own color scheme and icon.
Information message
Invalid TXID format. Please check and try again.
Transaction completed successfully.
Invalid TXID format. Please check and try again.
Sizes
Alerts come in two sizes: small (sm) and medium (md). Small alerts are 32px tall, medium alerts are 48px tall.
Small alert message
Medium alert message
Types
Alerts support three types: unselected (default with border), filled (with background), and text (no background or border).
Unselected (default with border)
Filled (with background)
Text (no background, no border)
Interaction States
Unselected alerts support three interaction states: default (unselected), hover, and selected. The hover state is automatically applied on hover, but you can also explicitly set the interaction state.
Unselected (default state) - hover to see hover state
Hover state
Selected state
Unselected (default state) - hover to see hover state
Hover state
Selected state
Unselected (default state) - hover to see hover state
Hover state
Selected state
Unselected (default state) - hover to see hover state
Hover state
Selected state
Examples
Copy any example below to use in your project. Each shows a common pattern (basic, error, success, etc.).
Basic
A basic info alert with default size and style.
Your profile information has been saved. Changes will be reflected immediately.
Error (destructive)
Use state="error" for payment failures or validation errors.
Your payment could not be processed. Please check your payment method and try again.
Success
Use state="success" for confirmations and completed actions.
Transaction completed successfully. A receipt has been sent to your email.
Warning
Use state="warning" for caution or expiry notices.
Your subscription will expire in 3 days. Renew now to avoid service interruption.
All Variants
The TXID is valid.
The TXID is valid.
The TXID is valid.
The TXID is valid. Please proceed to the next step
The TXID is valid. Please proceed to the next step
The TXID is valid. Please proceed to the next step
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Transaction completed successfully.
Transaction completed successfully.
Transaction completed successfully.
Transaction completed successfully.
Transaction completed successfully.
Transaction completed successfully.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Invalid TXID format. Please check and try again.
Custom Icon
Pass a custom icon via the icon prop.
Alert without icon (custom implementation needed)
Without Icon
Set showIcon= to hide the icon.
Alert without icon
API Reference
The Alert component displays a callout for user attention. It supports four states (info, error, success, warning), two sizes, and three visual types.
| Prop | Type | Default |
|---|---|---|
| state | "info" | "error" | "success" | "warning" | "info" |
| size | "sm" | "md" | "md" |
| type | "unselected" | "filled" | "text" | "unselected" |
| interaction | "default" | "hover" | "selected" | "default" |
| icon | React.ReactNode | — |
| showIcon | boolean | true |
| children | React.ReactNode | — |
Alert also accepts all standard HTMLDivElement attributes (e.g. className).
interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Alert state/variant
* @default "info"
*/
state?: "info" | "error" | "success" | "warning"
/**
* Alert size
* @default "md"
*/
size?: "sm" | "md"
/**
* Alert type/style
* @default "unselected"
*/
type?: "unselected" | "filled" | "text"
/**
* Interaction state: default (unselected), hover, or selected
* @default "default"
*/
interaction?: "default" | "hover" | "selected"
/**
* Alert message text
*/
children: React.ReactNode
/**
* Optional icon override
*/
icon?: React.ReactNode
/**
* Whether to show the icon
* @default true
*/
showIcon?: boolean
}