Alert

free

Alert keeps important feedback visible near the workflow it affects.

Subscription updated

The new billing owner will receive future invoices and renewal notices.

import Alert from '@/components/ui/alert';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Alert

pnpm dlx nateui@latest add Alert

yarn dlx nateui@latest add Alert

Examples

Basic

Review the details before continuing.

import Alert from '@/components/ui/alert';

export default function BasicDemo() {
  return (

Types

A new export is ready to download.

Your changes were saved successfully.

This plan is close to its seat limit.

This action cannot be undone.

import Alert from '@/components/ui/alert';

const alerts = [
  {

Icons

The alert can render without an icon.

Add `showIcon` to include the status icon.

import Alert from '@/components/ui/alert';

export default function IconDemo() {
  return (

Custom Icon

Automation complete

The workflow ran successfully with the custom status icon.

import { PiSparkle } from 'react-icons/pi'
import Alert from '@/components/ui/alert';

export default function CustomIconDemo() {

Title

Seats almost full

Upgrade the workspace or remove unused members before inviting more people.

import Alert from '@/components/ui/alert';

export default function TitleDemo() {
  return (

Closable

Invite sent. Close this alert when you are done reviewing it.

import Alert from '@/components/ui/alert';

export default function ClosableDemo() {
  return (

API

Alert accepts the props below plus motion-enabled props for the root div.

Prop	Description	Type	Default
`children`	Main alert message content.	`ReactNode`	-
`className`	Class names applied to the root alert.	`string`	-
`closable`	Shows the close control and lets the alert fade when clicked.	`boolean`	`false`
`customClose`	Replaces the default close button content.	`ReactNode \| string`	-
`customIcon`	Replaces the status icon when `showIcon` is enabled.	`ReactNode \| string`	-
`contentClass`	Class names applied to the inner content row.	`string`	-
`duration`	Delay before the timeout helper calls `onClose`. Pass `0` to disable the scheduled callback.	`number`	`3000`
`onClose`	Called when the close control is clicked, and by the timeout helper when enabled.	`AlertCloseHandler`	-
`ref`	Ref forwarded to the root alert element.	`Ref<HTMLDivElement>`	-
`showIcon`	Displays the status icon for the resolved `variant`.	`boolean`	`false`
`title`	Optional title rendered above the message.	`ReactNode \| string`	`null`
`triggerByToast`	Toast integration flag accepted by the component prop type.	`boolean`	-
`variant`	Status palette used by the alert. Invalid values fall back to `warning`.	`AlertVariant`	`'warning'`
`...motionDivProps`	Motion-enabled props for the root alert element, excluding `type` and `children`.	`NativeAlertMotionProps`	-

Types

type AlertVariant = 'success' | 'warning' | 'destructive' | 'info';
type AlertCloseHandler = (event?: MouseEvent<HTMLDivElement>) => void;
type NativeAlertMotionProps = Omit<HTMLMotionProps<'div'>, 'type' | 'children'>;