Alert

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

Import

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

ts
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.

tsx
<Alert />

tsx
<Alert />

Example

tsx
import { Alert } from "@kobalte/core/alert";
import "./style.css";
function App() {
  return <Alert class="alert">Kobalte is going live soon, get ready!</Alert>;
}

tsx
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