---
title: Alert
description: Displays a callout for user attention.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alert"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertDemo() {
	<div class="grid w-full max-w-md items-start gap-4">
		@alert.Alert() {
			@icon.CircleCheck()
			@alert.Title() {
				Payment successful
			}
			@alert.Description() {
				Your payment of $29.99 has been processed. A receipt has been sent to your email address.
			}
		}
		@alert.Alert() {
			@icon.Info()
			@alert.Title() {
				New feature available
			}
			@alert.Description() {
				We've added dark mode support. You can enable it in your account settings.
			}
		}
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add alert
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert" title="components/alert/alert.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/alert"
```

```templ showLineNumbers
@alert.Alert() {
	@icon.Info()
	@alert.Title() {
		Heads up!
	}
	@alert.Description() {
		You can add components to your app using the cli.
	}
	@alert.Action() {
		@button.Button(button.Props{Variant: button.VariantOutline}) {
			Enable
		}
	}
}
```

## Composition

Use the following composition to build an `Alert`:

```text
alert.Alert
├── icon
├── alert.Title
├── alert.Description
└── alert.Action
```

## Basic

A basic alert with an icon, title and description.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alert"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertBasic() {
	@alert.Alert(alert.Props{Class: "max-w-md"}) {
		@icon.CircleCheck()
		@alert.Title() {
			Account updated successfully
		}
		@alert.Description() {
			Your profile information has been saved. Changes will be reflected immediately.
		}
	}
}
```

## Destructive

Use `Variant: alert.VariantDestructive` to create a destructive alert.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alert"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertDestructive() {
	@alert.Alert(alert.Props{Variant: alert.VariantDestructive, Class: "max-w-md"}) {
		@icon.CircleAlert()
		@alert.Title() {
			Payment failed
		}
		@alert.Description() {
			Your payment could not be processed. Please check your payment method and try again.
		}
	}
}
```

## Action

Use `alert.Action` to add a button or other action element to the alert.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alert"
	"github.com/axadrn/shadcn-templ/v2/components/button"
)

templ AlertAction() {
	@alert.Alert(alert.Props{Class: "max-w-md"}) {
		@alert.Title() {
			Dark mode is now available
		}
		@alert.Description() {
			Enable it under your profile settings to get started.
		}
		@alert.Action() {
			@button.Button(button.Props{Size: button.SizeXs}) {
				Enable
			}
		}
	}
}
```

## Custom Colors

You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/alert"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ AlertColors() {
	@alert.Alert(alert.Props{Class: "max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50"}) {
		@icon.TriangleAlert()
		@alert.Title() {
			Your subscription will expire in 3 days.
		}
		@alert.Description() {
			Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
		}
	}
}
```

## API Reference

### Alert

The `Alert` component displays a callout for user attention.

| Prop      | Type                                   | Default          |
| --------- | -------------------------------------- | ---------------- |
| `Variant` | `VariantDefault \| VariantDestructive` | `VariantDefault` |
| `Class`   | `string`                               | -                |

### Title

The `alert.Title` component displays the title of the alert.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Description

The `alert.Description` component displays the description or content of the alert.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Action

The `alert.Action` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |