components

Alert

Display important messages with visual emphasis

Source Code

Installation

pnpm dlx radianui@latest add alert

Usage

Imports

/components/ui/alert.tsx
import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertIcon,
	AlertTitle,
	AlertToolbar,
} from "@/components/ui/alert"

Code

/components/ui/alert.tsx
<Alert>
	<AlertIcon>
		<Bell size={16} />
	</AlertIcon>
 
	<AlertContent>
		<AlertTitle>Alert Title</AlertTitle>
		<AlertDescription>This is alert description.</AlertDescription>
	</AlertContent>
 
	<AlertToolbar>
		<Button asChild variant="link">
			<Link href="#">Action</Link>
		</Button>
	</AlertToolbar>
</Alert>

Examples

Variants

Colors

On Close Functionality

Success Alert Examples

Error Alerts Examples

Info Alerts Examples

Warning Alert Examples

Props

<Alert>
NameDefaultValues
colorprimaryneutralprimaryinfosuccesswarningerror
variantsoftsoftsoft-outlineoutlinestrong
closefalseboolean
onClose-() => void