Alert

Informational messages with different severity levels.

Alert Variants

Default Alert

This is a default alert with neutral styling.

Information

This alert provides general information to the user.

Success

The operation was completed successfully.

Warning

This action might have unexpected consequences.

Error

An error occurred while processing your request.

With Custom Icon

Custom Icon Alert

This alert uses a custom icon instead of the default one.

Dismissable Alert

This alert can be dismissed by clicking the close button.

With Rich Content

Alert with Rich Content

Alerts can contain rich content including:

Lists of items
Links to other pages
Other interactive elements

Usage

import { Alert } from "@/components/alert"

export default function MyComponent() {
  return (
    <div className="space-y-4">
      <Alert
        variant="success"
        title="Success"
        description="Your changes have been saved."
      />
      
      <Alert
        variant="error"
        title="Error"
        description="There was a problem with your submission."
        onClose={() => console.log("Alert closed")}
      />
    </div>
  )
}

Props

Name

Type

Default

Description

variant

string

"default"

Alert style variant: "default", "info", "success", "warning", or "error".

title

string

undefined

Title text for the alert.

description

ReactNode

undefined

Description content for the alert.

icon

ReactNode

undefined

Custom icon to display in the alert.

onClose

function

undefined

Function called when the close button is clicked.