Introduction

Alerts provide contextual feedback messages for typical user actions. They support 8 themes matching UX4G 2.0, inline icons, links, and can be made dismissible.

Installation

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

Usage

<Alert theme='primary'>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components using the cli.</AlertDescription>
</Alert>

Examples

Default

A simple alert with title and description, no icon.

Heads up!

You can add components to your app using the cli.

AlertDefault

import { Info } from 'lucide-react';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

export default function Component() {
  return (
    <Alert theme="primary">
      <Info className="size-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
    </Alert>
  );
}

Themes

All 8 UX4G theme variants: primary, secondary, success, danger, warning, info, light, dark.

A simple primary alert — check it out!

A simple secondary alert — check it out!

A simple success alert — check it out!

A simple danger alert — check it out!

A simple warning alert — check it out!

A simple info alert — check it out!

A simple light alert — check it out!

A simple dark alert — check it out!

AlertThemes

import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

export default function Component() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert theme="primary">
        <Info className="size-4" />
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>This is a primary alert for general information.</AlertDescription>
      </Alert>
      <Alert theme="success">
        <CheckCircle2 className="size-4" />
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>Your changes have been saved successfully.</AlertDescription>
      </Alert>
      <Alert theme="danger">
        <AlertCircle className="size-4" />
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>Something went wrong. Please try again.</AlertDescription>
      </Alert>
      <Alert theme="warning">
        <TriangleAlert className="size-4" />
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>Your session is about to expire.</AlertDescription>
      </Alert>
    </div>
  );
}

With Icon

Use AlertIcon to place an icon inline adjacent to the text (UX4G d-flex align-items-center pattern).

Your changes have been saved successfully.

Something went wrong. Please try again.

Your session is about to expire.

A new update is available for download.

AlertWithIcon

'use client';

import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react';

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

export function AlertDefault() {
  return (
    <Alert theme='primary'>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
    </Alert>
  );
}

export function AlertThemes() {
  return (
    <div className='flex w-full flex-col gap-4'>
      <Alert theme='primary'>
        <AlertDescription>A simple primary alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='secondary'>
        <AlertDescription>A simple secondary alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='success'>
        <AlertDescription>A simple success alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='danger'>
        <AlertDescription>A simple danger alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='warning'>
        <AlertDescription>A simple warning alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='info'>
        <AlertDescription>A simple info alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='light'>
        <AlertDescription>A simple light alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='dark'>
        <AlertDescription>A simple dark alert — check it out!</AlertDescription>
      </Alert>
    </div>
  );
}

export function AlertWithIcon() {
  return (
    <div className='flex w-full flex-col gap-4'>
      <Alert theme='success'>
        <AlertIcon>
          <CheckCircle2 className='size-5 shrink-0' />
          <AlertDescription>Your changes have been saved successfully.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='danger'>
        <AlertIcon>
          <AlertCircle className='size-5 shrink-0' />
          <AlertDescription>Something went wrong. Please try again.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='warning'>
        <AlertIcon>
          <TriangleAlert className='size-5 shrink-0' />
          <AlertDescription>Your session is about to expire.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='info'>
        <AlertIcon>
          <Info className='size-5 shrink-0' />
          <AlertDescription>A new update is available for download.</AlertDescription>
        </AlertIcon>
      </Alert>
    </div>
  );
}

export function AlertDismissible() {
  return (
    <Alert theme='warning' dismissible>
      <AlertDescription>
        Holy guacamole! You should check in on some of those fields below.
      </AlertDescription>
    </Alert>
  );
}

export function AlertWithLink() {
  return (
    <Alert theme='primary'>
      <AlertDescription>
        A new version is available. <AlertLink href='#'>Update now</AlertLink>.
      </AlertDescription>
    </Alert>
  );
}

export function AlertSimple() {
  return (
    <Alert theme='danger'>
      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
    </Alert>
  );
}

export function AlertAdditionalContent() {
  return (
    <Alert theme='success'>
      <AlertTitle>Well done!</AlertTitle>
      <AlertDescription>You successfully completed the onboarding process.</AlertDescription>
      <hr className='my-3 border-current opacity-25' />
      <AlertDescription>
        Whenever you need to, be sure to check out the documentation for guidance.
      </AlertDescription>
    </Alert>
  );
}

Dismissible

Add the dismissible prop to allow users to close the alert.

Holy guacamole! You should check in on some of those fields below.

AlertDismissible

import { CheckCircle2 } from 'lucide-react';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

export default function Component() {
  return (
    <Alert theme="success" dismissible>
      <CheckCircle2 className="size-4" />
      <AlertTitle>Success!</AlertTitle>
      <AlertDescription>Your changes have been saved.</AlertDescription>
    </Alert>
  );
}

With Link

Use AlertLink for styled bold links inside alerts (UX4G font-weight: 700).

A new version is available. Update now.

AlertWithLink

import { Info } from 'lucide-react';
import { Alert, AlertTitle, AlertDescription, AlertLink } from '@/components/ui/alert';

export default function Component() {
  return (
    <Alert theme="primary">
      <Info className="size-4" />
      <AlertTitle>Update available</AlertTitle>
      <AlertDescription>
        A new version is available. <AlertLink href="#">Update now</AlertLink>.
      </AlertDescription>
    </Alert>
  );
}

Simple

An alert without a title.

Your session has expired. Please log in again.

AlertSimple

import { AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';

export default function Component() {
  return (
    <Alert theme="danger">
      <AlertCircle className="size-4" />
      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
    </Alert>
  );
}

Additional Content

Alerts with extended content such as headings, horizontal rules, and paragraphs.

Well done!

You successfully completed the onboarding process.

Whenever you need to, be sure to check out the documentation for guidance.

AlertAdditionalContent

'use client';

import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react';

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

export function AlertDefault() {
  return (
    <Alert theme='primary'>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the cli.</AlertDescription>
    </Alert>
  );
}

export function AlertThemes() {
  return (
    <div className='flex w-full flex-col gap-4'>
      <Alert theme='primary'>
        <AlertDescription>A simple primary alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='secondary'>
        <AlertDescription>A simple secondary alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='success'>
        <AlertDescription>A simple success alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='danger'>
        <AlertDescription>A simple danger alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='warning'>
        <AlertDescription>A simple warning alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='info'>
        <AlertDescription>A simple info alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='light'>
        <AlertDescription>A simple light alert — check it out!</AlertDescription>
      </Alert>
      <Alert theme='dark'>
        <AlertDescription>A simple dark alert — check it out!</AlertDescription>
      </Alert>
    </div>
  );
}

export function AlertWithIcon() {
  return (
    <div className='flex w-full flex-col gap-4'>
      <Alert theme='success'>
        <AlertIcon>
          <CheckCircle2 className='size-5 shrink-0' />
          <AlertDescription>Your changes have been saved successfully.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='danger'>
        <AlertIcon>
          <AlertCircle className='size-5 shrink-0' />
          <AlertDescription>Something went wrong. Please try again.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='warning'>
        <AlertIcon>
          <TriangleAlert className='size-5 shrink-0' />
          <AlertDescription>Your session is about to expire.</AlertDescription>
        </AlertIcon>
      </Alert>
      <Alert theme='info'>
        <AlertIcon>
          <Info className='size-5 shrink-0' />
          <AlertDescription>A new update is available for download.</AlertDescription>
        </AlertIcon>
      </Alert>
    </div>
  );
}

export function AlertDismissible() {
  return (
    <Alert theme='warning' dismissible>
      <AlertDescription>
        Holy guacamole! You should check in on some of those fields below.
      </AlertDescription>
    </Alert>
  );
}

export function AlertWithLink() {
  return (
    <Alert theme='primary'>
      <AlertDescription>
        A new version is available. <AlertLink href='#'>Update now</AlertLink>.
      </AlertDescription>
    </Alert>
  );
}

export function AlertSimple() {
  return (
    <Alert theme='danger'>
      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
    </Alert>
  );
}

export function AlertAdditionalContent() {
  return (
    <Alert theme='success'>
      <AlertTitle>Well done!</AlertTitle>
      <AlertDescription>You successfully completed the onboarding process.</AlertDescription>
      <hr className='my-3 border-current opacity-25' />
      <AlertDescription>
        Whenever you need to, be sure to check out the documentation for guidance.
      </AlertDescription>
    </Alert>
  );
}

API Reference

Alert

Prop	Type	Default	Description
`theme`	`primary \| secondary \| success \| danger \| warning \| info \| light \| dark`	`primary`	Color theme (UX4G 2.0 exact colors)
`dismissible`	`boolean`	`false`	Show close button
`onDismiss`	`() => void`	—	Callback when dismissed

AlertTitle

Renders an <h6> element with color: inherit per UX4G .alert-heading.

AlertDescription

Renders a <div> for alert body content.

AlertIcon

Flex wrapper for inline icon + text layout. Place icon and text as children.

AlertLink

Renders a styled <a> with font-weight: bold matching UX4G's font-weight: 700.

Alert

Heads up!

Well done!

On this page