Nayan UI - 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

Alert Types

Different alert types for various contexts.

Alert!

This is a default alert message.

Information!

This is an informational alert message.

Success!

Operation completed successfully!

Warning!

Please review your settings before proceeding.

Error!

An error occurred while processing your request.

Alerts with Titles

Add titles to provide more context.

Information

Here's some important information you should know about.

Success!

Your changes have been saved successfully.

Warning

This action cannot be undone. Please proceed with caution.

Error Occurred

Failed to connect to the server. Please try again later.

Dismissible Alerts

Alerts that can be closed by users.

Dismissible Alert

Click the X button to dismiss this alert.

Warning!

This alert can also be dismissed.

Custom Icons

Override default icons with custom ones.

Information!

Custom info icon alert.

Custom Success

Custom success icon with title.

Alerts with Actions

Add custom action buttons to alerts.

Update Available

A new version of the application is available.

Connection Failed

Unable to connect to the server.

Custom Styling

Customize appearance with className props.

Custom Styled Alert

This alert has custom styling applied.

Success!

Rounded alert with custom padding.

Rich Content

Use children prop for rich content instead of simple message.

Rich Content Alert

This alert contains rich content:

Multiple paragraphs
Lists and formatting
Custom components

Learn more in our documentation.

Accessibility

Alerts with proper ARIA roles and labels.

Critical Error

This is a critical error that requires immediate attention.

Status Update

Your profile has been updated successfully.

# 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