> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/alert.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Alert 警告提示

在页面中提示操作结果或需要关注的信息。

## 提示类型


项目已保存

有新的版本可用

你可以在方便的时候更新。

请检查当前设置

保存失败

请稍后重试，或联系团队管理员。

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/alert/basic.tsx"
import { Alert, Space } from '@ifhover/leaf-ui';

export function AlertBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Alert title="项目已保存" type="success" />
      <Alert title="有新的版本可用" description="你可以在方便的时候更新。" closable />
      <Alert title="请检查当前设置" type="warning" />
      <Alert title="保存失败" description="请稍后重试，或联系团队管理员。" type="error" />
    </Space>
  );
}
```

展开代码

## 中性提示

使用中性背景组织辅助信息，图标仍保留状态颜色。


访问范围符合策略

默认只读，变更操作需要审批。

草稿已自动保存

你可以稍后继续完成设置。

部分服务仍需配置

联系管理员完成连接后再试。

连接失败

请检查连接信息后重试。

neutral.tsx

复制代码

```tsx lineNumbers file="../../src/examples/alert/neutral.tsx"
import { Alert, Space } from '@ifhover/leaf-ui';

import { ShieldCheck } from 'lucide-react';

export function NeutralAlerts() {
  
  return (
    <Space direction="vertical" align="stretch">
      <Alert
        type="success"
        icon={<ShieldCheck size={20} />}
        title={'访问范围符合策略'}
        description={'默认只读，变更操作需要审批。'}
      />
      <Alert
        type="info"
        title={'草稿已自动保存'}
        description={'你可以稍后继续完成设置。'}
        closable
      />
      <Alert
        type="warning"
        title={'部分服务仍需配置'}
        description={'联系管理员完成连接后再试。'}
      />
      <Alert
        type="error"
        title={'连接失败'}
        description={'请检查连接信息后重试。'}
      />
    </Space>
  );
}
```

展开代码

## Alert API

| 属性            | 类型                                            | 默认值      | 说明       |
| ------------- | --------------------------------------------- | -------- | -------- |
| `title`       | `ReactNode`                                   | 必填       | 必需。提示内容  |
| `description` | `ReactNode`                                   | —        | 补充说明     |
| `type`        | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | 提示类型     |
| `icon`        | `ReactNode`                                   | —        | 图标内容。    |
| `showIcon`    | `boolean`                                     | `true`   | 展示语义图标   |
| `closable`    | `boolean`                                     | `false`  | 允许关闭当前提示 |
| `onClose`     | `() => void`                                  | —        | 关闭后触发    |

## 类型

定义组件属性或组装变量时可导入相关类型。

```ts
import type { AlertProps, FeedbackType } from '@ifhover/leaf-ui';
```

## 使用说明

成功、普通信息、警告和错误使用不同语义颜色。业务文字由应用提供；关闭按钮名称沿用 ConfigProvider 语言。

## 外观与丰富内容

提示默认使用中性背景，`type` 决定图标颜色和提示语义。`icon` 可以替换默认图标，`showIcon={false}` 隐藏图标。