KAlert
示例
默认提示
一条中性的默认告警，浅色背景、无图标。
提示
使用 title/description 插槽的写法，点击右侧 X 可关闭。
保存成功
你的修改已生效。
请检查输入
邮箱格式似乎不正确。
出错了
提交失败，请稍后重试。
Alert banner with a light surface, a colored left accent bar, and optional filled semantic icon. Each variant derives its tint from the theme's color tokens so it adapts to light/dark automatically. Includes title and description sub-components.
Sub-Components
- KAlert — Root alert container with variant and closable support
- KAlertTitle — Alert title (
<h5>element) - KAlertDescription — Alert description text
Props (KAlert)
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'destructive' | 'warning' | 'info' | 'success' | 'default' | Visual style variant of the alert. default is neutral with no icon; the others get a semantic color, left accent bar, and icon. |
| closable | boolean | false | Whether the alert can be dismissed with a close button. Fades out (~200ms) before the close event fires. |
| title | string | — | Convenience title text. Ignored if the default slot is used. |
| description | string | — | Convenience description text. Ignored if the default slot is used. |
| class | string | — | Additional CSS classes. |
| theme | 'auto' | 'day' | 'night' | 'auto' | Theme mode. auto follows the current theme; day and night force a specific mode. |
Emits
| Name | Description |
|---|---|
| close | Emitted after the alert finishes its fade-out transition when the close button is clicked. |
Slots
| Name | Description |
|---|---|
| default | Alert content. Use sub-components (KAlertTitle / KAlertDescription) for structured layouts; takes precedence over the title / description props. |
Basic Usage
Information
This is an informational alert message.
Saved
Your changes are live.