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

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

# Alert

Show a result or information that needs attention within a page.

## Feedback types


Project saved

A new version is available

Update whenever it is convenient.

Check your settings

Save failed

Try again later or contact your team administrator.

basic.tsx

Copy code

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

export function AlertBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Alert title="Project saved" type="success" />
      <Alert
        title="A new version is available"
        description="Update whenever it is convenient."
        closable
      />
      <Alert title="Check your settings" type="warning" />
      <Alert
        title="Save failed"
        description="Try again later or contact your team administrator."
        type="error"
      />
    </Space>
  );
}
```

Expand code

## Neutral alerts

Present supporting information on a neutral surface with semantic icon colors.


Access follows your policy

Read-only by default. Changes require approval.

Your draft is saved

You can finish setting up later.

Some services need setup

Ask your administrator to connect them before retrying.

Connection failed

Check the connection settings and retry.

neutral.tsx

Copy code

```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={'Access follows your policy'}
        description={'Read-only by default. Changes require approval.'}
      />
      <Alert
        type="info"
        title={'Your draft is saved'}
        description={'You can finish setting up later.'}
        closable
      />
      <Alert
        type="warning"
        title={'Some services need setup'}
        description={'Ask your administrator to connect them before retrying.'}
      />
      <Alert
        type="error"
        title={'Connection failed'}
        description={'Check the connection settings and retry.'}
      />
    </Space>
  );
}
```

Expand code

## Alert API

| Property      | Type                                          | Default  | Description            |
| ------------- | --------------------------------------------- | -------- | ---------------------- |
| `title`       | `ReactNode`                                   | Required | Required. Main content |
| `description` | `ReactNode`                                   | —        | Additional details     |
| `type`        | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | Feedback type          |
| `icon`        | `ReactNode`                                   | —        | Icon content.          |
| `showIcon`    | `boolean`                                     | `true`   | Show the feedback icon |
| `closable`    | `boolean`                                     | `false`  | Allow dismissal        |
| `onClose`     | `() => void`                                  | —        | Called after dismissal |

## Types

Import types when defining reusable component props or assembling options.

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

## Usage notes

Success, information, warning and error messages use distinct semantic colors. Supply application text yourself; the close button follows the ConfigProvider language.

## Surfaces and rich content

The neutral surface keeps the icon color and announcement semantics of `type`. Override `icon` or use `showIcon={false}` to hide it.