Alert
An Alert component is a UI element used to display important messages or notifications to users. It can convey different types of information such as success, warning, error, or informational messages, typically styled with distinct colors and icons to highlight the message's significance. Alerts are often used to grab the user's attention and provide immediate feedback on actions or events.
# Demo
Demo Coming Soon
Alert examples will be available soon.
# Usage
# Attributes
Name | Type | Default | Details |
---|---|---|---|
type | AlertTypes | Required | You can pass type of the alert. |
message | string | Optional | You can pass alert message. |
title | string | Optional | You can pass alert title. |
icon | React.ReactNode | Optional | Custom icon for the alert. |
actions | React.ReactNode | Optional | Custom actions for the alert. |
className | string | ' ' | You can customise by passing tailwind classes. |
titleClassName | string | ' ' | You can customise by passing tailwind classes. |
messageClassName | string | ' ' | You can customise by passing tailwind classes. |
closeClassName | string | ' ' | You can customise by passing tailwind classes. |
onClose | () => void | Optional | You can get callback when alert got closed. |
role | 'alert' | 'status' | Optional | ARIA role for accessibility. |
children | React.ReactNode | Optional | Custom content for the alert. |
# Tags