---
title: Alert
description: Prominent messages for important information, warnings, and errors.
icon: triangle-exclamation
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

Alerts draw attention to important information. They pair a title with a description and use color variants to signal intent.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Heads up!"},{"type":"AlertDescription","content":"You can add components to your app using the CLI."}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydFRpdGxlLAogICAgQWxlcnREZXNjcmlwdGlvbiwKKQoKd2l0aCBBbGVydCgpOgogICAgQWxlcnRUaXRsZSgiSGVhZHMgdXAhIikKICAgIEFsZXJ0RGVzY3JpcHRpb24oIllvdSBjYW4gYWRkIGNvbXBvbmVudHMgdG8geW91ciBhcHAgdXNpbmcgdGhlIENMSS4iKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Alert,
    AlertTitle,
    AlertDescription,
)

with Alert():
    AlertTitle("Heads up!")
    AlertDescription("You can add components to your app using the CLI.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Alert",
    "variant": "default",
    "children": [
      {"type": "AlertTitle", "content": "Heads up!"},
      {
        "type": "AlertDescription",
        "content": "You can add components to your app using the CLI."
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## With Icons

Pass an `icon` prop to render a lucide icon alongside the alert content. The icon automatically aligns with the title and description.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","icon":"circle-alert","children":[{"type":"AlertTitle","content":"Heads up!"},{"type":"AlertDescription","content":"You can add components to your app using the CLI."}]},{"type":"Alert","variant":"destructive","icon":"circle-x","children":[{"type":"AlertTitle","content":"Error"},{"type":"AlertDescription","content":"Your session has expired. Please log in again."}]},{"type":"Alert","variant":"success","icon":"circle-check","children":[{"type":"AlertTitle","content":"Success"},{"type":"AlertDescription","content":"Your changes have been saved successfully."}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Alert,
    AlertDescription,
    AlertTitle,
    Column,
)

with Column(gap=4):
    with Alert(icon="circle-alert"):
        AlertTitle("Heads up!")
        AlertDescription(
            "You can add components to your app "
            "using the CLI."
        )

    with Alert(variant="destructive", icon="circle-x"):
        AlertTitle("Error")
        AlertDescription(
            "Your session has expired. Please log "
            "in again."
        )

    with Alert(variant="success", icon="circle-check"):
        AlertTitle("Success")
        AlertDescription(
            "Your changes have been saved "
            "successfully."
        )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "type": "Alert",
        "variant": "default",
        "icon": "circle-alert",
        "children": [
          {"type": "AlertTitle", "content": "Heads up!"},
          {
            "type": "AlertDescription",
            "content": "You can add components to your app using the CLI."
          }
        ]
      },
      {
        "type": "Alert",
        "variant": "destructive",
        "icon": "circle-x",
        "children": [
          {"type": "AlertTitle", "content": "Error"},
          {
            "type": "AlertDescription",
            "content": "Your session has expired. Please log in again."
          }
        ]
      },
      {
        "type": "Alert",
        "variant": "success",
        "icon": "circle-check",
        "children": [
          {"type": "AlertTitle", "content": "Success"},
          {
            "type": "AlertDescription",
            "content": "Your changes have been saved successfully."
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Variants

Five variants cover different semantic intents — from neutral information to success confirmations and error states.

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Default"},{"type":"AlertDescription","content":"A neutral informational message."}]},{"type":"Alert","variant":"destructive","children":[{"type":"AlertTitle","content":"Error"},{"type":"AlertDescription","content":"Your session has expired. Please log in again."}]},{"type":"Alert","variant":"success","children":[{"type":"AlertTitle","content":"Success"},{"type":"AlertDescription","content":"Your changes have been saved successfully."}]},{"type":"Alert","variant":"warning","children":[{"type":"AlertTitle","content":"Warning"},{"type":"AlertDescription","content":"Your trial expires in 3 days."}]},{"type":"Alert","variant":"info","children":[{"type":"AlertTitle","content":"Info"},{"type":"AlertDescription","content":"A new version is available for download."}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Alert,
    AlertDescription,
    AlertTitle,
    Column,
)

with Column(gap=4):
    with Alert():
        AlertTitle("Default")
        AlertDescription("A neutral informational message.")

    with Alert(variant="destructive"):
        AlertTitle("Error")
        AlertDescription("Your session has expired. Please log in again.")

    with Alert(variant="success"):
        AlertTitle("Success")
        AlertDescription("Your changes have been saved successfully.")

    with Alert(variant="warning"):
        AlertTitle("Warning")
        AlertDescription("Your trial expires in 3 days.")

    with Alert(variant="info"):
        AlertTitle("Info")
        AlertDescription("A new version is available for download.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "type": "Alert",
        "variant": "default",
        "children": [
          {"type": "AlertTitle", "content": "Default"},
          {"type": "AlertDescription", "content": "A neutral informational message."}
        ]
      },
      {
        "type": "Alert",
        "variant": "destructive",
        "children": [
          {"type": "AlertTitle", "content": "Error"},
          {
            "type": "AlertDescription",
            "content": "Your session has expired. Please log in again."
          }
        ]
      },
      {
        "type": "Alert",
        "variant": "success",
        "children": [
          {"type": "AlertTitle", "content": "Success"},
          {
            "type": "AlertDescription",
            "content": "Your changes have been saved successfully."
          }
        ]
      },
      {
        "type": "Alert",
        "variant": "warning",
        "children": [
          {"type": "AlertTitle", "content": "Warning"},
          {"type": "AlertDescription", "content": "Your trial expires in 3 days."}
        ]
      },
      {
        "type": "Alert",
        "variant": "info",
        "children": [
          {"type": "AlertTitle", "content": "Info"},
          {
            "type": "AlertDescription",
            "content": "A new version is available for download."
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Without Title

For simple messages, you can use just a description:

<ComponentPreview json={{"view":{"type":"Alert","variant":"default","children":[{"type":"AlertDescription","content":"Your changes have been saved."}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQWxlcnQsCiAgICBBbGVydERlc2NyaXB0aW9uLAopCgp3aXRoIEFsZXJ0KCk6CiAgICBBbGVydERlc2NyaXB0aW9uKCJZb3VyIGNoYW5nZXMgaGF2ZSBiZWVuIHNhdmVkLiIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Alert,
    AlertDescription,
)

with Alert():
    AlertDescription("Your changes have been saved.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Alert",
    "variant": "default",
    "children": [{"type": "AlertDescription", "content": "Your changes have been saved."}]
  }
}
```
</CodeGroup>
</ComponentPreview>

## In Context

Alerts work well inside cards or at the top of a page to communicate status:

<ComponentPreview json={{"view":{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Deployment"}]},{"type":"CardContent","children":[{"cssClass":"gap-4","type":"Column","children":[{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Maintenance Window"},{"type":"AlertDescription","content":"Deployments are paused from 2:00\u20134:00 AM UTC."}]},{"type":"Alert","variant":"default","children":[{"type":"AlertTitle","content":"Latest Deploy"},{"type":"AlertDescription","content":"v2.1.0 deployed successfully 3 hours ago."}]}]}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    Alert,
    AlertTitle,
    AlertDescription,
    Column,
)

with Card():
    with CardHeader():
        CardTitle("Deployment")
    with CardContent():
        with Column(gap=4):
            with Alert():
                AlertTitle("Maintenance Window")
                AlertDescription("Deployments are paused from 2:00–4:00 AM UTC.")
            with Alert():
                AlertTitle("Latest Deploy")
                AlertDescription("v2.1.0 deployed successfully 3 hours ago.")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Card",
    "children": [
      {
        "type": "CardHeader",
        "children": [{"type": "CardTitle", "content": "Deployment"}]
      },
      {
        "type": "CardContent",
        "children": [
          {
            "cssClass": "gap-4",
            "type": "Column",
            "children": [
              {
                "type": "Alert",
                "variant": "default",
                "children": [
                  {"type": "AlertTitle", "content": "Maintenance Window"},
                  {
                    "type": "AlertDescription",
                    "content": "Deployments are paused from 2:00\u20134:00 AM UTC."
                  }
                ]
              },
              {
                "type": "Alert",
                "variant": "default",
                "children": [
                  {"type": "AlertTitle", "content": "Latest Deploy"},
                  {
                    "type": "AlertDescription",
                    "content": "v2.1.0 deployed successfully 3 hours ago."
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Alert Parameters">
<ParamField body="variant" type="str" default="default">
  Visual style: `"default"`, `"destructive"`, `"success"`, `"warning"`, `"info"`.
</ParamField>

<ParamField body="icon" type="str | None" default="None">
  Lucide icon name in kebab-case (e.g., `"circle-alert"`, `"circle-check"`). Browse icons at [lucide.dev/icons](https://lucide.dev/icons).
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="AlertTitle Parameters">
<ParamField body="content" type="str" required>
  Title text. Can be passed as a positional argument.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

<Card icon="code" title="AlertDescription Parameters">
<ParamField body="content" type="str" required>
  Description text. Can be passed as a positional argument.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

## Protocol Reference

```json Alert
{
  "type": "Alert",
  "children?": "[Component]",
  "let?": "object",
  "variant?": "default | destructive | success | warning | info",
  "icon?": "string",
  "cssClass?": "string"
}
```

```json AlertTitle
{
  "type": "AlertTitle",
  "content": "string (required)",
  "cssClass?": "string"
}
```

```json AlertDescription
{
  "type": "AlertDescription",
  "content": "string (required)",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Alert](/protocol/alert), [AlertTitle](/protocol/alert-title), [AlertDescription](/protocol/alert-description).
