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";


	
	
		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.

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

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


	
	
		This is an info Alert as a page banner

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";


	
	
		This is an info Alert as a page banner

API Reference

The Alert is 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.