Alert
A styled text component for highlighting important information, warnings, or contextual messages within a UI.
Example
Installation
Button. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add alertAnatomy
import { Alert } from "@/components/ui/core/alert";<div className="space-y-4">
<Alert
title="Default Alert"
message="Alert for default"
icon={<Bell className="size-5" data-slot="icon" />}
/>
<Alert
tone="info"
title="Info Alert"
message="Alert for info"
icon={<Info className="size-5" data-slot="icon" />}
/>
<Alert
tone="success"
title="Success Alert"
message="Alert for success"
icon={<CheckCircle className="size-5" data-slot="icon" />}
/>
<Alert
tone="warning"
title="Warning Alert"
message="Alert for warning"
icon={<AlertTriangle className="size-5" data-slot="icon" />}
/>
<Alert
tone="destructive"
title="Error Alert"
message="Alert for destructive"
icon={<XCircle className="size-5" data-slot="icon" />}
/>
</div>Another Examples
Tones
The Alert component provides several tones to display different types of important messages: neutral, info, success, warning, and error.
Custom Build
The Custom Alert is built using low-level primitives like AlertRoot, AlertTitle, and AlertDescription. This setup offers full control over structure and behavior, making it easy to integrate buttons, icons, or custom interactions. It also includes a close action, allowing users to dismiss the alert manually when appropriate.
Can be Closed
An alert that can be manually dismissed by the user. This pattern improves usability by allowing temporary messages to be closed once they’re no longer needed, keeping the interface clean and focused.
Controlled State
An alert that can be manually dismissed by the user. This pattern improves usability by allowing temporary messages to be closed once they’re no longer needed, keeping the interface clean and focused.
Props
Loading types…