# Alert

- Page: https://jiguang132.com/resources/arco-design/docs/alert
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Used to display warning information in a way that attracts attention.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Warning prompts. Suitable for displaying short warning prompts in a way that attracts attention.
- **Different type**: There are four types of warnings: `info`, `success`, `warning`, and `error`.
- **Closable**: Use `closable = true` to turn on the close button.
- **Custom close element**: Use `closeElement` to customize the close element. `closeElement` can receive `onClick`, has its own `close` parameter, and can be closed by calling `close()`.
- **With title**: `content` is turned into auxiliary introduction text with presence of `title`.
- **Without icon**: Use `showIcon=false` to hide the icon.
- **Top Banner**: Use `banner = true` to display Alert as a banner on top of the page.
- **Action**: Customize the action items through `action`.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Alert

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|banner|Whether to show as banner|boolean |`-`|
|closable|Whether Alert can be closed|boolean |`-`|
|showIcon|Whether to show icon|boolean |`true`|
|type|Type of Alert|'info' \| 'success' \| 'warning' \| 'error' |`info`|
|action|Custom action item|ReactNode |`-`|
|closeElement|Custom close button|ReactNode |`-`|
|content|Alert content|ReactNode |`-`|
|icon|Custom icon, effective when `showIcon` is `true`|ReactNode |`-`|
|title|Alert title|ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|afterClose|Callback when Alert close animation is complete|() => void |`-`|
|onClose|Callback when Alert is closed|(e) => void |`-`|

---

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