Alert

free

Alert keeps important feedback visible near the workflow it affects.

motion

Preview

Dark

Subscription updated

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

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

export default function UsageDemo() {
  return (
    <div className="w-full max-w-md">
      <Alert showIcon variant="info" title="Subscription updated">
        The new billing owner will receive future invoices and renewal notices.
      </Alert>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Alert

Examples

Basic

Preview

Dark

Review the details before continuing.

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

export default function BasicDemo() {
  return (
    <div className="w-full max-w-md">
      <Alert>Review the details before continuing.</Alert>
    </div>
  );
}

Types

Preview

Dark

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 = [
  {
    variant: 'info',
    message: 'A new export is ready to download.',
  },
  {
    variant: 'success',
    message: 'Your changes were saved successfully.',
  },
  {
    variant: 'warning',
    message: 'This plan is close to its seat limit.',
  },
  {
    variant: 'destructive',
    message: 'This action cannot be undone.',
  },
] as const;

export default function TypesDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {alerts.map((alert) => (
        <Alert key={alert.variant} showIcon variant={alert.variant}>
          {alert.message}
        </Alert>
      ))}
    </div>
  );
}

Icons

Preview

Dark

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 (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert variant="info">The alert can render without an icon.</Alert>
      <Alert showIcon variant="info">
        Add `showIcon` to include the status icon.
      </Alert>
    </div>
  );
}

Custom Icon

Preview

Dark

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() {
  return (
    <div className="w-full max-w-md">
      <Alert
        showIcon
        variant="success"
        customIcon={<PiSparkle />}
        title="Automation complete"
      >
        The workflow ran successfully with the custom status icon.
      </Alert>
    </div>
  );
}

Title

Preview

Dark

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 (
    <div className="w-full max-w-md">
      <Alert showIcon variant="warning" title="Seats almost full">
        Upgrade the workspace or remove unused members before inviting more people.
      </Alert>
    </div>
  );
}

Closable

Preview

Dark

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

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

export default function ClosableDemo() {
  return (
    <div className="w-full max-w-md">
      <Alert closable showIcon variant="success">
        Invite sent. Close this alert when you are done reviewing it.
      </Alert>
    </div>
  );
}

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