Alert

Displays a callout for user attention.

Danger

This is a danger Alert.

Info

This is an info Alert.

Success

This is a success Alert.

Warning

This is a warning Alert.

Danger w/ custom icon

This is a danger Alert.

import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertTitle,
	AlertIcon,
} from "@ngrok/mantle/alert";
import { Shrimp } from "@phosphor-icons/react/Shrimp";

<Alert priority="danger">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Danger</AlertTitle>
		<AlertDescription>This is a danger Alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="info">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Info</AlertTitle>
		<AlertDescription>This is an info Alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="success">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Success</AlertTitle>
		<AlertDescription>This is a success Alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="warning">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Warning</AlertTitle>
		<AlertDescription>This is a warning Alert.</AlertDescription>
	</AlertContent>
</Alert>
<Alert priority="danger">
	<AlertIcon svg={<Shrimp />} />
	<AlertContent>
		<AlertTitle>Danger w/ custom icon</AlertTitle>
		<AlertDescription>This is a danger Alert.</AlertDescription>
	</AlertContent>
</Alert>

Examples

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,
	AlertIcon,
} from "@ngrok/mantle/alert";

// Danger Alert with icon
<Alert priority="danger">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Danger Will Robinson</AlertTitle>
		<AlertDescription>This is a danger alert.</AlertDescription>
	</AlertContent>
</Alert>

// Danger Alert without icon
<Alert priority="danger">
	<AlertContent>
		<AlertTitle>Danger Will Robinson</AlertTitle>
		<AlertDescription>This is a danger alert.</AlertDescription>
	</AlertContent>
</Alert>

// Danger Alert with icon and no description
<Alert priority="danger">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>Danger Will Robinson</AlertTitle>
	</AlertContent>
</Alert>

// Danger Alert without icon or description
<Alert priority="danger">
	<AlertContent>
		<AlertTitle>Danger Will Robinson</AlertTitle>
	</AlertContent>
</Alert>

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,
	AlertDescription,
	AlertTitle,
	AlertIcon,
} from "@ngrok/mantle/alert";

<Alert priority="info" className="rounded-none">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>This is an info Alert as a page banner</AlertTitle>
	</AlertContent>
</Alert>

Depending on the context, you may want or need to remove all borders except the bottom one. This can be achieved by adding rounded-none border-x-0 border-t-0 to the Alert component.

This is an info Alert as a page banner with only a bottom border

Laboris commodo Lorem anim consequat ut dolore proident.

import {
	Alert,
	AlertContent,
	AlertDescription,
	AlertTitle,
	AlertIcon,
} from "@ngrok/mantle/alert";

<Alert priority="info" className="rounded-none border-x-0 border-t-0">
	<AlertIcon />
	<AlertContent>
		<AlertTitle>This is an info Alert as a page banner</AlertTitle>
	</AlertContent>
</Alert>

API Reference

The Alert displays a callout for user attention and is composed of several sub-components.

Alert

Displays a callout for user attention. Root container for all Alert sub-components.

All props from div, plus:

Prop	Type	Default	Description
priority	danger info success warning	—	Indicates the importance or impact level of the `Alert`, affecting its color and styling to communicate its purpose to the user.

AlertContent

The container for the content slot of an Alert. Place the AlertTitle and AlertDescription as direct children.

All props from standard HTML div attributes

AlertDescription

The optional description of an Alert. Default renders as a p element; use asChild to render something else.

All props from standard HTML p attributes, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `AlertDescription` styling and functionality onto alternative element types or your own React components.

AlertIcon

An optional icon that visually represents the priority of the Alert. The default rendered icon be overridden with a custom icon using the svg prop.

All props from standard HTML svg attributes, plus:

Prop	Type	Default	Description
svg	ReactNode	—	An optional icon that renders in place of the default icon for the `Alert` priority.

AlertTitle

The title of an Alert. Default renders as an h5 element; use asChild to render something else.

All props from standard HTML h5 attributes, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `AlertTitle` styling and functionality onto alternative element types or your own React components.