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
Prop | Type | Options | Default |
---|---|---|---|
priority | enum | danger default info success warning | default |