Alert アラート

ページレベルの静的な警告提示です（命令的サービスではなく、Message とは区別されます）。セマンティックと live region のロールが連動します。warning/danger は role="alert" で即時に読み上げられ、info/success は role="status" で穏やかに読み上げられます。

基本的な使い方

4 つのセマンティック

通知メッセージです。

操作が正常に完了しました。

ディスク容量がもうすぐ不足します。

ネットワーク接続が切断されました。

<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?: string
  closable?: boolean
  showIcon?: boolean
  plain?: boolean
  closeLabel?: string
  sx?: LhSxProps
}

LhAlertType _{（@lh-ui/share/core/alert より）}

export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'