Reactify Component Showcase

Explore our versatile collection of UI components, from standard elements to advanced tools. Each is designed for reusability, accessibility, and easy theming.

Alert

v1.0.0

Examples and usage of the Reactify Alert component.

Alert Variants

Information

This is an informational message.

Success!

Your action was completed successfully.

Warning

Please be cautious with this action. (No default icon)

Error Occurred

Something went wrong. Please try again.

Alert without Title

This alert only has a description body.

Dismissible (Example)

1  
2import { ReactifyAlert } from '@/components/reactify/alert'; 
3import { CheckCircle } from 'lucide-react'; // Or your custom icon 
4  
5// Info Alert (Default) 
6<ReactifyAlert title="Information"> 
7  This is an informational message. 
8</ReactifyAlert> 
9  
10// Success Alert with Custom Icon 
11<ReactifyAlert variant="success" title="Success!" icon={<CheckCircle className="h-5 w-5 text-green-500" />}> 
12  Your action was completed successfully. 
13</ReactifyAlert> 
14  
15// Warning Alert (No Icon by prop) 
16<ReactifyAlert variant="warning" title="Warning" icon={false}> 
17  Be cautious with this action. (No default icon) 
18</ReactifyAlert> 
19  
20// Destructive Alert 
21<ReactifyAlert variant="destructive" title="Error Occurred"> 
22  Something went wrong. Please try again. 
23</ReactifyAlert> 
24  
25// Alert without title 
26<ReactifyAlert variant="info"> 
27  This alert only has a description body. 
28</ReactifyAlert>

Categories

Standard Components

Advanced Tools