# Alert

Display a brief, important message in a way that attracts the user's attention without interrupting the user's task.

## Import

```
Copyts
import { Alert } from "@kobalte/core/alert";
// or
import { Root } from "@kobalte/core/alert";
// or (deprecated)
import { Alert } from "@kobalte/core";
```

```
Copyts
import { Alert } from "@kobalte/core/alert";
// or
import { Root } from "@kobalte/core/alert";
// or (deprecated)
import { Alert } from "@kobalte/core";
```

## Features

- Adhere to the [WAI ARIA Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) design pattern.

## Anatomy

The alert consists of :

- **Alert:** The root container for an alert.

```
Copytsx
<Alert />
```

```
Copytsx
<Alert />
```

## Example

Kobalte is going live soon, get ready!

index.tsxstyle.css

```
Copytsx
import { Alert } from "@kobalte/core/alert";
import "./style.css";

function App() {
  return <Alert class="alert">Kobalte is going live soon, get ready!</Alert>;
}
```

```
Copytsx
import { Alert } from "@kobalte/core/alert";
import "./style.css";

function App() {
  return <Alert class="alert">Kobalte is going live soon, get ready!</Alert>;
}
```

## API reference

### Alert

`Alert` is equivalent to the `Root` import from `@kobalte/core/alert` (and deprecated `Alert.Root`).

Renders a `div` by default and support all its props.

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `Alert` | `div` |

Previous[←Accordion](https://kobalte.dev/docs/core/components/accordion)Next[Alert Dialog→](https://kobalte.dev/docs/core/components/alert-dialog)