Alert Notification

A versatile alert and notification system that provides toast notifications, alert dialogs, and simple alert/confirm functions.

Basic Usage

A simple alert notification that shows a message with a title, type, and duration.

Alert Types

The Alert Notification system supports different types of alerts to match various scenarios.

Alert Dialog

For alerts that require immediate attention or confirmation, you can use the AlertDialog component.

Props

Available props for the Alert Notification component.

Alert

Prop
Type
Default
Description
title
string
''

Title of the alert

message
string | ReactNode
''

Message content of the alert

type
'success' | 'error' | 'info'
'info'

Type of alert which determines the styling and icon

duration
number
5000

Duration in milliseconds before auto-hiding (0 for no auto-hide)

onConfirm
Function
null

Callback function for confirm button

confirmText
string
'OK'

Text for confirm button

onCancel
Function
null

Callback function for cancel button

cancelText
string
'Cancel'

Text for cancel button

className
string
''

Additional CSS classes to apply to the alert

position
'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
'top-right'

Position of the alert on the screen