Alert
Displays a callout for user attention.
# Demo
Alert!
Information!
Success!
Warning!
Error!
# Attributes
Name | Type | Default | Details |
---|---|---|---|
className | string | ' ' | You can customise by passing tailwind classes. |
titleClassName | string | ' ' | You can customise by passing tailwind classes. |
closeClassName | string | ' ' | You can customise by passing tailwind classes. |
messageClassName | string | ' ' | You can customise by passing tailwind classes. |
type | AlertTypes | AlertTypes.DEFAULT | You can pass type of the alert. |
title | string | Renders based on the type you passed. | You can pass alert title. |
message | string | Required | You can pass alert message. |
onClose | () => void | Required | You can get callback when alert got closed. |
# Usage
import { NAlert, AlertTypes } from 'nayan';
const Alert = () => {
return (
<div>
<NAlert type={AlertTypes.DEFAULT} message="New version available!" className="mb-3" onClose={() => console.log('Alert closed')} />
<NAlert type={AlertTypes.INFO} message="New version available!" className="mb-3" onClose={() => console.log('Alert closed')} />
<NAlert type={AlertTypes.SUCCESS} message="New version available!" className="mb-3" onClose={() => console.log('Alert closed')} />
<NAlert type={AlertTypes.WARNING} message="New version available!" className="mb-3" onClose={() => console.log('Alert closed')} />
<NAlert type={AlertTypes.ERROR} title="Error!" message="New version available!" className="mb-3" onClose={() => console.log('Alert closed')} />
</div>
);
};
export default Alert;