Alert 警告提示

頁面級靜態警告（非命令式，區別於 Message）。語意與 live region 角色聯動：warning/danger 用 role="alert" 立即播報，info/success 用 role="status" 溫和播報。

基礎用法

四種語意

一條中性提示。

操作已成功完成。

磁碟空間即將不足。

網路連線已中斷。

<script setup lang="ts">
</script>

<template>
  <!-- 中性提示 -->
  <LhAlert>一条中性提示。</LhAlert>
  <!-- success -->
  <LhAlert type="success">操作已成功完成。</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">磁盘空间即将不足。</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">网络连接已中断。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 中性提示 -->
  <LhAlert>一条中性提示。</LhAlert>
  <!-- success -->
  <LhAlert type="success">操作已成功完成。</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">磁盘空间即将不足。</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">网络连接已中断。</LhAlert>
</template>

帶圖示與標題

圖示與標題

儲存成功

文件已同步到雲端。

刪除失敗

該條目正被其他協作者編輯。

<script setup lang="ts">
</script>

<template>
  <!-- 保存成功 -->
  <LhAlert type="success" show-icon title="保存成功">文档已同步到云端。</LhAlert>
  <!-- 刪除失敗 -->
  <LhAlert type="danger" show-icon title="删除失败">该条目正被其他协作者编辑。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 保存成功 -->
  <LhAlert type="success" show-icon title="保存成功">文档已同步到云端。</LhAlert>
  <!-- 刪除失敗 -->
  <LhAlert type="danger" show-icon title="删除失败">该条目正被其他协作者编辑。</LhAlert>
</template>

可關閉

可關閉

點選右側按鈕關閉我。

自訂關閉按鈕文案。

<script setup lang="ts">
</script>

<template>
  <!-- 預設關閉文案 -->
  <LhAlert closable>点击右侧按钮关闭我。</LhAlert>
  <!-- 自定義關閉文案 -->
  <LhAlert closable close-label="知道了">自定义关闭按钮文案。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 預設關閉文案 -->
  <LhAlert closable>点击右侧按钮关闭我。</LhAlert>
  <!-- 自定義關閉文案 -->
  <LhAlert closable close-label="知道了">自定义关闭按钮文案。</LhAlert>
</template>

樸素樣式

樸素樣式

淺底描邊的樸素樣式。

適合嵌在淺色背景上。

<script setup lang="ts">
</script>

<template>
  <!-- warning 樸素 -->
  <LhAlert type="warning" plain show-icon>浅底描边的朴素样式。</LhAlert>
  <!-- danger 樸素 -->
  <LhAlert type="danger" plain show-icon>适合嵌在浅色背景上。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning 樸素 -->
  <LhAlert type="warning" plain show-icon>浅底描边的朴素样式。</LhAlert>
  <!-- danger 樸素 -->
  <LhAlert type="danger" plain show-icon>适合嵌在浅色背景上。</LhAlert>
</template>

Alert API

Props

屬性	說明	類型	預設值
type	語意類型	"info" | "success" | "warning" | "danger"	'info'
title	標題（也可用 title 插槽）	string	—
closable	是否可關閉	boolean	false
showIcon	是否顯示語意圖示	boolean	false
plain	淺色樸素樣式（白底描邊）	boolean	false
closeLabel	關閉按鈕的無障礙名稱（未傳時取語言包 alert.close）	string	—
sx	sx 快速版面配置屬性	LhSxProps	—

Events

事件	說明	參數
close	點選關閉按鈕後觸發	—

Slots

插槽	說明
title	自訂標題
default	描述內容

無障礙

• warning/danger → role="alert"（立即播報）；info/success → role="status"（溫和播報）
• 關閉按鈕為真實 <button>，aria-label 取語言包 alert.close，:focus-visible 焦點環
• 語意色淺底由 color-mix() 從語意色衍生，自動跟隨主題與明暗模式

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/alert/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhAlertProps

export interface LhAlertProps {
  /** 語意類型 */
  type?: LhAlertType
  /** 標題（也可用 title 插槽） */
  title?: string
  /** 是否可關閉 */
  closable?: boolean
  /** 是否顯示語意圖示 */
  showIcon?: boolean
  /** 是否淺色樸素樣式 */
  plain?: boolean
  /** 關閉按鈕的無障礙名稱（未傳時取語言包 alert.close） */
  closeLabel?: string
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhAlertType _{（來自 @lh-ui/share/core/alert）}

/** 警告語意類型 */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'