0.16.1

Theme Switcher

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

PropTypeDefaultDescription

priority

  • danger
  • default
  • info
  • success
  • warning
outlined

Indicates the importance or impact level of the Alert, affecting its color and styling to communicate its purpose to the user.