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";
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.
Composition
You can mix and match what you put inside the Alert component to create different types of Alert layouts.
Danger Alert with icon
Danger Will Robinson
Cupidatat ullamco commodo laborum consectetur ut mollit et nostrud amet elit ut Lorem culpa.
Danger Alert without icon
Danger Will Robinson
Cupidatat ullamco commodo laborum consectetur ut mollit et nostrud amet elit ut Lorem culpa.
Danger Alert with icon and no description
Danger Will Robinson
Danger Alert without icon or description
Danger Will Robinson
import { Alert, AlertContent, AlertDescription, AlertTitle } from "@ngrok/mantle/alert";
import { Warning } from "@phosphor-icons/react";
// Danger Alert with icon
Danger Will Robinson
This is a danger alert.
// Danger Alert without icon
Danger Will Robinson
This is a danger alert.
// Danger Alert with icon and no description
Danger Will Robinson
// Danger Alert without icon or description
Danger Will Robinson
Banners
For banner-like alerts, set rounded-none on the Alert component.
This is an info Alert as a page banner
Laboris commodo Lorem anim consequat ut dolore proident.
import { Alert, AlertContent, AlertTitle } from "@ngrok/mantle/alert";
import { Rocket } from "@phosphor-icons/react";
This is an info Alert as a page banner
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
priority |
| outlined | Indicates the importance or impact level of the |