Theme Switcher

Alert

Displays a callout for user attention.

Default
This is a default alert.
Danger
This is a danger alert.
Info
This is an info alert.
Success
This is a success alert.
Warning
This is a warning alert.
import { Alert, AlertContent, AlertDescription, AlertTitle } from "@ngrok/mantle";

<Alert>
	<Rocket className="size-5" />
	<AlertContent>
		<AlertTitle>Default</AlertTitle>
		<AlertDescription>This is a default alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="danger">
	<Warning className="size-5" />
	<AlertContent>
		<AlertTitle>Danger</AlertTitle>
		<AlertDescription>This is a danger alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="info">
	<Info className="size-5" />
	<AlertContent>
		<AlertTitle>Info</AlertTitle>
		<AlertDescription>This is an info alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="success">
	<CheckCircle className="size-5" />
	<AlertContent>
		<AlertTitle>Success</AlertTitle>
		<AlertDescription>This is a success alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="warning">
	<WarningDiamond className="size-5" />
	<AlertContent>
		<AlertTitle>Warning</AlertTitle>
		<AlertDescription>This is a warning alert.</AlertDescription>
	</AlertContent>
</Alert>

API Reference

PropTypeOptionsDefault
priorityenum

danger

default

info

success

warning

default