🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Alert

Feedback and status message component with multiple variants and customization options

This is an info alert — check it out!

This is a success alert — check it out!

Installation

The Alert component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Alert component into your React component.

import { Alert } from 'reacui';

Alert Variants

ReacUI alerts come in several variants to accommodate different types of messages and contexts.

This is an info alert — check it out!

This is a success alert — check it out!

This is a warning alert — check it out!

This is a danger alert — check it out!

<Alert variant="info">This is an info alert — check it out!</Alert>
<Alert variant="success">This is a success alert — check it out!</Alert>
<Alert variant="warning">This is a warning alert — check it out!</Alert>
<Alert variant="danger">This is a danger alert — check it out!</Alert>

Alerts with Icons

You can customize alerts with custom icons or no icons at all.

This is an alert with no icon

🔔

This is an alert with a custom icon

<Alert icon={null}>This is an alert with no icon</Alert>
<Alert icon={<BellIcon className="mr-2" />}>This is an alert with a custom icon</Alert>

Dismissible Alerts

Alerts can be made dismissible, allowing users to close them.

This is a dismissible alert

<Alert 
  variant="info" 
  dismissible
  onDismiss={() => console.log('Alert dismissed')}
>
  This is a dismissible alert
</Alert>

API Reference

The following props are available for the Alert component.

Prop	Type	Default	Description
variant	string	'info'	Alert style variant: 'info', 'success', 'warning', or 'danger'
dismissible	boolean	false	Determines if the alert can be dismissed
icon	ReactNode	-	Custom icon to display. Set to null to hide icon completely.
className	string	''	Additional CSS classes to apply
onDismiss	function	-	Callback function invoked when the alert is dismissed
children	ReactNode	-	Content to display inside the alert