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

<script setup>
import { KAlert, KAlertTitle, KAlertDescription } from '@kK-2004/ui-component'
</script>

<template>
  <!-- Slot layout -->
  <KAlert variant="info" :closable="true">
    <KAlertTitle>Information</KAlertTitle>
    <KAlertDescription>This is an informational alert message.</KAlertDescription>
  </KAlert>

  <!-- Props shorthand (no icon for default) -->
  <KAlert variant="success" title="Saved" description="Your changes are live." />
</template>