Alert

Heads up!

You can add components and dependencies to your app using the CLI.

Installation

npm install @radix-ui/react-slot@^1.2.4 @tabler/icons-react@^3.36.1 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

lib/icons.ts
lib/utils.ts
components/alert/alert.tsx
components/alert/index.ts

Code

'use client';

import { IconInfoCircle } from '@tabler/icons-react';

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/alert/alert';

export default function AlertDemo() {
  return (
    <Alert className="nx:max-w-md">
      <AlertIcon>
        <IconInfoCircle />
      </AlertIcon>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components and dependencies to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

Props

Alert

Alert props
Prop	Type	Default	Description
`layout`	`"inline" \| "stack" \| null`	`"stack"`	No description
`presentation`	`"banner" \| "card" \| null`	`"card"`	No description
`variant`	`"default" \| "destructive" \| "success" \| "information" \| "warning" \| null`	`"default"`	No description

AlertActions

AlertActions adds no props of its own; it accepts the props of the element or primitive it wraps.

AlertClose

AlertClose adds no props of its own; it accepts the props of the element or primitive it wraps.

AlertContent

AlertContent adds no props of its own; it accepts the props of the element or primitive it wraps.

AlertDescription

AlertDescription adds no props of its own; it accepts the props of the element or primitive it wraps.

AlertIcon

AlertIcon adds no props of its own; it accepts the props of the element or primitive it wraps.

AlertTitle

AlertTitle props
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the title styles on a child element. Use this when the alert title needs real heading semantics in the page outline.

Examples

Variants

Default

A new version of the CLI is ready.

Information

Maintenance is scheduled for Sunday.

Success

Your changes have been saved.

Warning

Your trial ends in three days.

Destructive

The payment could not be processed.

'use client';

import {
  IconAlertCircle,
  IconAlertTriangle,
  IconCircleCheck,
  IconInfoCircle,
  IconTerminal2,
} from '@tabler/icons-react';

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/alert/alert';

export default function AlertVariants() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-md nx:flex-col nx:gap-4">
      <Alert variant="default">
        <AlertIcon>
          <IconTerminal2 />
        </AlertIcon>
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>A new version of the CLI is ready.</AlertDescription>
      </Alert>
      <Alert variant="information">
        <AlertIcon>
          <IconInfoCircle />
        </AlertIcon>
        <AlertTitle>Information</AlertTitle>
        <AlertDescription>
          Maintenance is scheduled for Sunday.
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertIcon>
          <IconCircleCheck />
        </AlertIcon>
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>Your changes have been saved.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertIcon>
          <IconAlertTriangle />
        </AlertIcon>
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>Your trial ends in three days.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertIcon>
          <IconAlertCircle />
        </AlertIcon>
        <AlertTitle>Destructive</AlertTitle>
        <AlertDescription>The payment could not be processed.</AlertDescription>
      </Alert>
    </div>
  );
}

With actions

Plan limit reached

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

This example also needs:

components/button-group/button-group-context.ts
components/spinner/index.ts
components/spinner/spinner.tsx
components/button/button.tsx
components/button/index.ts

'use client';

import { IconAlertTriangle } from '@tabler/icons-react';

import {
  Alert,
  AlertActions,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/alert/alert';
import { Button } from '@/components/button/button';

export default function AlertWithActions() {
  return (
    <Alert variant="warning" className="nx:max-w-md">
      <AlertIcon>
        <IconAlertTriangle />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Plan limit reached</AlertTitle>
        <AlertDescription>
          Upgrade the workspace or remove unused seats before inviting more
          members.
        </AlertDescription>
      </AlertContent>
      <AlertActions>
        <Button>Upgrade</Button>
        <Button variant="outline">View usage</Button>
      </AlertActions>
    </Alert>
  );
}

Dismissible

Import completed

Review the imported contacts before publishing them.

This example also needs:

components/button-group/button-group-context.ts
components/spinner/index.ts
components/spinner/spinner.tsx
components/button/button.tsx
components/button/index.ts

'use client';

import { useRef, useState } from 'react';
import { flushSync } from 'react-dom';

import { IconCircleCheck } from '@tabler/icons-react';

import {
  Alert,
  AlertActions,
  AlertClose,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/alert/alert';
import { Button } from '@/components/button/button';

export default function AlertDismissible() {
  const [open, setOpen] = useState(true);
  const showRef = useRef<HTMLButtonElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  function dismiss() {
    flushSync(() => setOpen(false));
    showRef.current?.focus();
  }

  function show() {
    flushSync(() => setOpen(true));
    closeRef.current?.focus();
  }

  if (!open) {
    return (
      <Button ref={showRef} variant="outline" onClick={show}>
        Show alert
      </Button>
    );
  }

  return (
    <Alert variant="success" layout="inline" className="nx:max-w-xl">
      <AlertIcon>
        <IconCircleCheck />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Import completed</AlertTitle>
        <AlertDescription>
          Review the imported contacts before publishing them.
        </AlertDescription>
      </AlertContent>
      <AlertActions>
        <Button variant="outline">Review</Button>
        <AlertClose ref={closeRef} onClick={dismiss} />
      </AlertActions>
    </Alert>
  );
}

Scheduled maintenance

The dashboard is read-only on Sunday from 02:00 to 04:00 UTC.

'use client';

import { IconInfoCircle } from '@tabler/icons-react';

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from '@/components/alert/alert';

export default function AlertBanner() {
  return (
    <div className="nx:w-full nx:max-w-lg nx:overflow-hidden nx:rounded-md nx:border-default nx:border-border-default">
      <Alert presentation="banner" variant="information">
        <AlertIcon>
          <IconInfoCircle />
        </AlertIcon>
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          The dashboard is read-only on Sunday from 02:00 to 04:00 UTC.
        </AlertDescription>
      </Alert>
      <div className="nx:h-24 nx:bg-background" />
    </div>
  );
}