Alert
Demo
Heads up!
This is an default alert with an icon.
Error!
This is an destructive alert with an icon.
Props
| Prop | Type | Description |
|---|---|---|
variant | 'default' | 'destructive' (optional) | The style variant of the alert. Options are 'default' or 'destructive'. |
title | string (optional) | The title of the alert. |
description | string (optional) | The detailed description or message of the alert. |
icon | React.ReactNode (optional) | A custom icon to display in the alert. |
classNames | { root?: string; title?: string; description?: string } (optional) | Custom class names for the alert, title, and description components. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Alert component.title: CSS class for styling the title of the alert.description: CSS class for styling the description of the alert.
Functionality
- The Alert component can be used to draw attention to important information or warnings.
- Supports customizable titles, descriptions, and icons.
- Offers two stylistic variants to suit different contexts or severity levels.