# Alert · JGuang UI

> Displays a callout for user attention.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/alert
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `alert-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/alert.tsx](/r/jguang-ui/base/alert.json)


### Update the import paths to match your project setup.


## Usage

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

```tsx showLineNumbers
<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>
```

## Composition

Use the following composition to build an `Alert`:

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

## Basic

A basic alert with an icon, title and description.


> Example `alert-basic`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## Destructive

Use `variant="destructive"` to create a destructive alert.


> Example `alert-destructive`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## Action

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


> Example `alert-action`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## 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.


> Example `alert-colors`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `alert-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/alert


## API Reference

### Alert

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

| Prop      | Type                         | Default     |
| --------- | ---------------------------- | ----------- |
| `variant` | `"default" \| "destructive"` | `"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 (like a button) positioned absolutely in the top-right corner of the alert.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | -       |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt