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

Rendered live, with the same build of the library you install.

Alert!

New version available!

Information!

New version available!

Success!

New version available!

Warning!

New version available!

Error!

New version available!

Usage

Source

Alert.tsx

import { AlertTypes, NAlert } from '@nayan-ui/react';

const Alert = () => {
  return (
    <div>
      <div className="space-y-3">
        <NAlert type={AlertTypes.DEFAULT} message="New version available!" onClose={() => console.log('Alert closed')} />
        <NAlert type={AlertTypes.INFO} message="New version available!" onClose={() => console.log('Alert closed')} />
        <NAlert type={AlertTypes.SUCCESS} message="New version available!" onClose={() => console.log('Alert closed')} />
        <NAlert type={AlertTypes.WARNING} message="New version available!" onClose={() => console.log('Alert closed')} />
        <NAlert type={AlertTypes.ERROR} title="Error!" message="New version available!" onClose={() => console.log('Alert closed')} />
      </div>
    </div>
  );
};

export default Alert;

Attributes

12 props

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.

Alert

Demo

Usage

Attributes

Tags