1.6 KiB
1.6 KiB
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 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←AccordionNextAlert Dialog→