Skip to main content
Kobalte
ComponentsChangelog

Alert

Since v0.1.0@kobalte/core/alertSourceAlert

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

Import

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

Features

Anatomy

The alert consists of :

  • Alert: The root container for an alert.
<Alert />

Example

import { Alert } from "@kobalte/core/alert";


export function BasicExample() {
  return (
    <Alert class={style.alert}>Kobalte is going live soon, get ready!</Alert>
  );
}
.alert {
  border-radius: 6px;
  padding: 12px 16px;
  background-color: hsl(204 100% 97%);
  color: hsl(201 96% 32%);
  font-size: 16px;
}


[data-theme*="dark"] .alert {
  background-color: hsla(202 80% 24% / 0.2);
  color: hsl(198 93% 60%);
}

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

ComponentDefault rendered element
Alertdiv

Last updated: 7/16/26, 7:09 AM