---
title: Alert
description: Alerts in Click UI are used to display important messages to users. They can be informational, warning, success, or error messages.
category: Feedback
related: [Text, Button, Container]
commonPatterns: [error-alert, success-alert, warning-alert]
---

Source: https://clickhouse.design/click-ui/alert

# Alert

Alerts are used to display important messages to users. They can be informational, warning, success, or error messages. They help communicate system status, validation errors, or important notifications.

## Example

## Props

| Prop        | Type                                                       | Default value | Description                                                           |
| ----------- | ---------------------------------------------------------- | ------------- | --------------------------------------------------------------------- |
| state       | `"success" \| "warning" \| "error" \| "info" \| "neutral"` | `"info"`      | Visual state variant that determines the alert color and icon         |
| title       | `string`                                                   | `undefined`   | Optional title text displayed prominently in the alert                |
| text        | `React.ReactNode`                                          | `undefined`   | Main message content of the alert. Can be text or React nodes.        |
| size        | `"small" \| "medium"`                                      | `"medium"`    | Size variant of the alert                                             |
| type        | `"default" \| "banner"`                                    | `"default"`   | Display type - default (inline) or banner (full-width at top of page) |
| dismissable | `boolean`                                                  | `false`       | Whether the alert can be dismissed with a close button                |
| showIcon    | `boolean`                                                  | `true`        | Whether to display the state icon in the alert                        |
| customIcon  | `IconType`                                                 | `undefined`   | Custom icon name to override the default state icon                   |

```tsx
import { Alert } from '@clickhouse/click-ui'

// Basic alert
<Alert
state="success"
title="Success"
text="Operation completed successfully."
/>

// Banner alert
<Alert
state="info"
text="This is an informational message."
type="banner"
/>
```

## Quick start

```tsx
import { Alert } from '@clickhouse/click-ui'

function MyAlert() {
return (
  <Alert
    state="success"
    title="Success"
    text="Operation completed successfully."
    showIcon
  />
)
}
```

## Related components

- **Text**: Alerts often contain text content.
- **Button**: Sometimes used within alerts for actions.
- **Container**: For organizing multiple alerts.

## Common use cases

### Success alert

```tsx
import { Alert } from '@clickhouse/click-ui'

function SuccessAlert() {
return (
  <Alert
    showIcon
    state="success"
    title="Success"
    text="Your changes have been saved successfully."
  />
)
}
```

### Error alert

```tsx
import { Alert } from '@clickhouse/click-ui'

function ErrorAlert() {
return (
  <Alert
    showIcon
    state="danger"
    text="An error occurred while processing your request."
  />
)
}
```

### Warning alert

```tsx
import { Alert } from '@clickhouse/click-ui'

function WarningAlert() {
return (
  <Alert
    showIcon
    state="warning"
    text="Please review the following items before proceeding."
  />
)
}
```

### Banner alert

```tsx
import { Alert } from '@clickhouse/click-ui'

function BannerAlert() {
return (
  <Alert
    showIcon
    state="info"
    text="Important system announcement"
    type="banner"
  />
)
}
```