Alert
Provide contextual feedback messages.
Basic
Simple alert
This is a basic alert with a longer message to demonstrate the component's appearance and behavior.
Types
Different alert types
This is a success alert with a longer message to show the success state clearly.
This is an error alert with a longer message to demonstrate the error state in detail.
This is a warning alert with a longer message to highlight the warning state for users.
This is an info alert with a longer message to provide more information to the user.
Variants
Alert variants
Default variant with a longer message to show the default style of the alert component in detail.
Solid variant with a longer message to demonstrate the solid style of the alert component for users.
Outline variant with a longer message to illustrate the outline style of the alert component clearly.
Sizes
Alert sizes
This is a small info alert with more details for demonstration purposes.
This is a medium info alert with additional information to show the size.
This is a large info alert with extended text to illustrate the alert's appearance.
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
message | string | React.ReactNode | - | Alert message content |
type | 'success' | 'error' | 'warning' | 'info' | - | Style of the alert |
showCloseButton | boolean | false | Display close button |
onClose | () => void | - | Close callback |
variant | 'default' | 'solid' | 'outline' | 'default' | Visual variant |
size | 'sm' | 'md' | 'lg' | 'md' | Alert size |
customIcon | React.ComponentType<{ className?: string }> | - | Custom icon component |
customColors | { container?: string; text?: string; icon?: string } | - | Override default colors |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | '' | Additional CSS classes |