85 lines
1.6 KiB
Markdown
85 lines
1.6 KiB
Markdown
# 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) |