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>

Composition

You can mix and match what you put inside the Alert component to create different types of Alert layouts.

Danger Will Robinson

Cupidatat ullamco commodo laborum consectetur ut mollit et nostrud amet elit ut Lorem culpa.

Danger Will Robinson

Cupidatat ullamco commodo laborum consectetur ut mollit et nostrud amet elit ut Lorem culpa.

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 border, 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

Alert.Root

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. `"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.

Alert.Content

The container for the content slot of an Alert. Place Alert.Title, Alert.Description, and Alert.DismissIconButton as direct children.

All props from div.

Alert.Description

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 div, plus:

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

Alert.Icon

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

All props from svg, plus:

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

Alert.Title

The title of an Alert. Renders as an h5 element by default; use asChild to render something else.

All props from h5, plus:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `AlertTitle` styling 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 onto alternative element types or your own React components.