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 } from "@ngrok/mantle/alert";
import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";

<Alert.Root priority="danger">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Danger</Alert.Title>
		<Alert.Description>This is a danger Alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>
<Alert.Root priority="info">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Info</Alert.Title>
		<Alert.DismissIconButton />
		<Alert.Description>This is an info Alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>
<Alert.Root priority="success">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Success</Alert.Title>
		<Alert.Description>This is a success Alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>
<Alert.Root priority="warning">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Warning</Alert.Title>
		<Alert.Description>This is a warning Alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>
<Alert.Root priority="danger">
	<Alert.Icon svg={<ShrimpIcon />} />
	<Alert.Content>
		<Alert.Title>Danger w/ custom icon</Alert.Title>
		<Alert.Description>This is a danger Alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>

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 and AlertDismissIconButton

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, but including AlertDismissIconButton.

Danger Will Robinson

import { Alert } from "@ngrok/mantle/alert";

// Danger Alert with icon and Dismiss Icon Button
<Alert.Root priority="danger">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Danger Will Robinson</Alert.Title>
		<Alert.DismissIconButton />
		<Alert.Description>This is a danger alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>

// Danger Alert without icon
<Alert.Root priority="danger">
	<Alert.Content>
		<Alert.Title>Danger Will Robinson</Alert.Title>
		<Alert.Description>This is a danger alert.</Alert.Description>
	</Alert.Content>
</Alert.Root>

// Danger Alert with icon and no description
<Alert.Root priority="danger">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>Danger Will Robinson</Alert.Title>
	</Alert.Content>
</Alert.Root>

// Danger Alert without icon or description, but including a Dismiss Icon Button
<Alert.Root priority="danger">
	<Alert.Content>
		<Alert.Title>Danger Will Robinson</Alert.Title>
		<Alert.DismissIconButton />
	</Alert.Content>
</Alert.Root>

Banners

For banner-like alerts, use the appearance="banner" prop. This automatically removes the top, left, and right borders, leaving only the bottom border.

This is an info Alert as a page banner

Laboris commodo Lorem anim consequat ut dolore proident.

import { Alert } from "@ngrok/mantle/alert";

<Alert.Root priority="info" appearance="banner">
	<Alert.Icon />
	<Alert.Content>
		<Alert.Title>This is an info Alert as a page banner</Alert.Title>
	</Alert.Content>
</Alert.Root>

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
appearance	default banner	default	Controls the visual style of the `Alert`. "default" provides standard rounded corners and borders. "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no top, left, or right borders.
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 and AlertDismissIconButton as direct children.

All props from standard HTML div attributes

AlertDescription

The optional description of an Alert. Renders as a div by default, but can be changed to any other element using the asChild prop.

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.

Alert.DismissIconButton

A dismiss icon button that closes the alert when clicked.

All props from button, plus:

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