Alert

Displays a compact callout for user attention.

New feature available

Export failed. Please try again.

Loading…

"use client"

import { CircleAlertIcon, InfoIcon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4 rounded-xl bg-muted p-6">
      <Alert variant="info">
        <InfoIcon data-icon="inline-start" />
        <AlertDescription>New feature available</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon data-icon="inline-start" />
        <AlertDescription>Export failed. Please try again.</AlertDescription>
      </Alert>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/alert

Usage

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@/components/ui/alert"

<div className="flex w-full max-w-md flex-col gap-4 rounded-xl bg-muted p-6">
  <Alert variant="info">
    <InfoIcon data-icon="inline-start" />
    <AlertDescription>New feature available</AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <CircleAlertIcon data-icon="inline-start" />
    <AlertDescription>Export failed. Please try again.</AlertDescription>
  </Alert>
</div>

Composition

Use the following composition to build an Alert:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Examples

Basic

A white alert for colored or muted surfaces.

AI summaries are now available.

Loading…

"use client"

import { InfoIcon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertBasic() {
  return (
    <div className="w-full max-w-md rounded-xl bg-muted p-6">
      <Alert>
        <InfoIcon data-icon="inline-start" />
        <AlertDescription>AI summaries are now available.</AlertDescription>
      </Alert>
    </div>
  )
}

Destructive

Use variant="destructive" for a filled coral message.

We couldn't generate your PDF. Please try again.

Loading…

"use client"

import { AlertCircleIcon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertDestructive() {
  return (
    <Alert variant="destructive" className="max-w-md">
      <AlertCircleIcon data-icon="inline-start" />
      <AlertDescription>
        We couldn&apos;t generate your PDF. Please try again.
      </AlertDescription>
    </Alert>
  )
}

Info

Use variant="info" for an informational message on an alice-blue background.

Your resume is visible to recruiters. Manage visibility.

Loading…

"use client"

import { InfoIcon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertInfo() {
  return (
    <Alert variant="info" className="max-w-md">
      <InfoIcon data-icon="inline-start" />
      <AlertDescription>
        Your resume is visible to recruiters. <a href="#">Manage visibility</a>.
      </AlertDescription>
    </Alert>
  )
}

Success

Use variant="success" to create a success alert.

Your resume is now live and shareable.

Loading…

"use client"

import { CheckCircle2Icon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertSuccess() {
  return (
    <Alert variant="success" className="max-w-md">
      <CheckCircle2Icon data-icon="inline-start" />
      <AlertDescription>
        Your resume is now live and shareable.
      </AlertDescription>
    </Alert>
  )
}

Action

Use AlertAction to add a full-width action below the message.

AI summaries are now available.

Loading…

"use client"

import { InfoIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export default function AlertActionExample() {
  return (
    <Alert className="max-w-md">
      <InfoIcon data-icon="inline-start" />
      <AlertDescription>AI summaries are now available.</AlertDescription>
      <AlertAction>
        <Button size="sm" variant="outline">
          Open app
        </Button>
      </AlertAction>
    </Alert>
  )
}

Outlined Destructive

Use variant="destructive-outline" when the error needs a lighter visual weight.

Check your payment details and try again.

Loading…

"use client"

import { AlertCircleIcon } from "lucide-react"

import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AlertDestructiveOutline() {
  return (
    <Alert variant="destructive-outline" className="max-w-md">
      <AlertCircleIcon data-icon="inline-start" />
      <AlertDescription>
        Check your payment details and try again.
      </AlertDescription>
    </Alert>
  )
}

API Reference

Alert

The Alert component displays a callout for user attention.

Prop	Type	Default
`variant`	`"default" \| "info" \| "success" \| "destructive" \| "destructive-outline"`	`"default"`

AlertTitle

The AlertTitle component displays the title of the alert.

Prop	Type	Default
`className`	`string`	-

AlertDescription

The AlertDescription component displays the description or content of the alert.

Prop	Type	Default
`className`	`string`	-

AlertAction

The AlertAction component displays an action element below the message. Buttons fill the available width.

Prop	Type	Default
`className`	`string`	-