Success! Your changes have been saved
This is an alert with icon, title and description.
Installation
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/alert.jsonUsage
import { CheckCircle2Icon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert>
<CheckCircle2Icon />
<AlertTitle>Success! Your changes have been saved</AlertTitle>
<AlertDescription>
This is an alert with icon, title and description.
</AlertDescription>
</Alert>Examples
Default
Success! Your changes have been saved
This is an alert with icon, title and description.
Destructive
Something went wrong!
Your session has expired. Please log in again.
Only Icon and Description
This one has an icon and a description only. No title.
Only Description
This one has a description only. No title. No icon.
Only Icon and Title
Let's try one with icon and title.
Long Description
This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines
Long Title
This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines
Long Title and Description
This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior
This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.
With Button
The selected emails have been marked as spam.