Alert

ユーザーに重要な情報を伝えるためのフィードバックコンポーネント。成功、警告、エラー、情報などの状態を視覚的に区別して表示します。

Basic

jui-alert の最も基本的な使用例です。

variant プロパティを使用してコンポーネントの視覚的なスタイルを変更します。

dismissible プロパティを使用して、ユーザーが閉じることができるアラートを作成します。

スロットを使用して、リッチなテキストやHTML要素を表示します。

Custom Title: This alert uses the default slot for rich markdown formatting.

slot="icon" を指定した要素（アイコン用WebフォントやSVG、絵文字など）を挿入することで、デフォルトのステータスアイコンを任意のものに上書きできます。

💡 カスタムアイコン（スロット）を使用して、デフォルトの警告アイコンを上書きしています。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`color-mix()`	カラーバリアント	111+	113+	16.4+	Baseline 2023
`@starting-style`	フェードインアニメーション	117+	129+	17.5+	Baseline 2024
`allow-discrete`	display トランジション	117+	129+	17.4+	Baseline 2024

💡 @starting-style と allow-discrete はアラート表示時のフェードインアニメーションに使用しています。未対応ブラウザではアニメーションなしで即座に表示されます。

WAI-ARIA:
- アラートコンテナの role はバリアントに応じて自動的に切り替わります。variant="warning" および variant="danger" の場合は role="alert"（緊急性の高い通知）、variant="info" および variant="success" の場合は role="status"（補足的な通知）が付与されます。
- visible が false の場合は aria-hidden="true" が付与され、非表示状態のアラートが支援技術から読み上げられないようにしています。
- dismissible が true のときに表示される閉じるボタンはネイティブの <button type="button"> で、aria-label に dismissLabel（デフォルト "Dismiss"）が設定されます。dismissLabel Prop により多言語化できます。
- ステータスアイコンおよび閉じるボタン内の SVG には aria-hidden="true" が指定されており、装飾要素として支援技術から無視されます。
キーボードナビゲーション:
- dismissible 時の閉じるボタンはネイティブの <button> 要素のため、Tab キーでフォーカスでき、Enter または Space キーでアラートを閉じることができます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`dismissLabel`	`dismiss-label`	閉じるボタンのアクセシビリティラベル（i18n対応）	`string`	`'Dismiss'`
`dismissible`	`dismissible`	閉じるボタンの表示有無	`boolean`	`false`
`message`	`message`	アラートのテキストメッセージ（スロットの代わりに使用可能）	`string \| undefined`	`undefined`
`variant`	`variant`	アラートのバリアント	`"danger" \| "info" \| "success" \| "warning"`	`'info'`
`visible`	`visible`	アラートの表示状態（外部から再表示可能）	`boolean`	`true`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiDismiss`	閉じるボタンがクリックされた時に発火するイベント	`CustomEvent<{ variant: string; }>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	アラートメッセージ（デフォルトスロット）
`"icon"`	左側アイコン（デフォルトアイコンを上書き）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS