> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-alert.md).

# AX - アラート

## 概要

**AX - アラート** これは、Experience Sites ページ上でポータルユーザーに重要なメッセージや通知を表示する Experience Cloud コンポーネントです。

システムアラート、エラーメッセージ、警告、成功確認、または時間制限のあるお知らせを表示するために使用します。アラートをいつ表示するか、何を伝えるか、どのように表示するかを制御できます。これらはすべてコードなしで Experience Builder 内で設定できます。

ポータルのメンテナンス通知、フォーム送信の確認、アカウント状態のアラート、または顧客ポータルやパートナーポータルでユーザーを手順に沿って案内するのに最適です。

<figure><img src="/files/108271b4ff01e6693f00881959ad83ec9e345223" alt=""><figcaption></figcaption></figure>

***

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

<table><thead><tr><th width="183">属性</th><th>説明</th></tr></thead><tbody><tr><td><strong>バリアント</strong></td><td><p>「variant」属性を使用すると、Avonni Alert コンポーネントの外観をカスタマイズして、伝えたいアラートの種類をより適切に反映できます。使用可能なバリアントは次のとおりです。</p><ul><li><strong><code>エラー</code></strong>：重大な通知や問題向け。</li><li><strong><code>ベース</code></strong>：標準的な汎用アラート。</li><li><strong><code>オフライン</code></strong>：接続性または利用可能性に関する懸念を示します。</li><li><strong><code>警告</code></strong>：注意が必要だが、重大ではないアラート向け。</li></ul><p>より明確なユーザー理解のために、伝えたいメッセージに合ったバリアントを選択してください。</p></td></tr><tr><td><strong>コンテンツ</strong></td><td>「content」属性は、Avonni Alert コンポーネントで伝えたい主要なメッセージや情報を指定します。アラート内に表示されるテキスト内容を保持し、ユーザーに特定の通知や状況を知らせたり認識させたりします。</td></tr><tr><td><strong>アイコン名</strong></td><td>「icon name」属性を使用すると、Avonni Alert コンポーネントに特定のアイコンを設定できます。アイコン名を指定することで、アラートの性質や文脈を視覚的に表現でき、明瞭さが向上し、メッセージへユーザーの注意をすぐに引き付けることができます。</td></tr><tr><td><strong>アイコンサイズ</strong></td><td><p>Avonni Alert コンポーネントの「icon size」属性では、アイコンのサイズを制御できます。</p><ul><li><strong>XXS</strong>：さりげなく強調するための超小サイズ。</li><li><strong>XS</strong>：最小限の目立ち方をする超小サイズ。</li><li><strong>小</strong>：適度な視認性を持つ控えめなサイズ。</li><li><strong>中</strong>：バランスの取れた視認性の標準サイズ。</li><li><strong>大</strong>：最大の視覚的インパクト向け。</li></ul></td></tr><tr><td><strong>閉じることが可能</strong></td><td>「Is Dismissible」属性を有効にすると、ユーザーはインターフェース上の Avonni Alert を閉じたり、解除したりできます。有効化すると、アラート上に閉じるボタンが表示され、ユーザーが手動で削除できます。</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 スタイリング" %}

<table><thead><tr><th width="183">属性</th><th>説明</th></tr></thead><tbody><tr><td><strong>間隔</strong></td><td><p>Avonni Alert コンポーネントのスペーシングスタイル設定では、余白を調整できます。</p><ul><li><strong>ブロック開始</strong>：上余白を設定します。</li><li><strong>ブロック終了</strong>：下余白を調整します。</li><li><strong>インライン開始</strong>：左余白を設定します。</li><li><strong>インライン終了</strong>：右余白を変更します。</li></ul></td></tr><tr><td><strong>背景</strong></td><td><p>Avonni Alert コンポーネントの背景スタイル設定では、背景をカスタマイズできます。</p><ul><li><strong>色</strong>：背景に単色を選択します。</li><li><strong>線形グラデーション</strong>：動きのある、見た目に魅力的なグラデーション効果を得るにはこのオプションを選択します</li></ul></td></tr><tr><td><strong>テキスト</strong></td><td><p>Avonni Alert コンポーネントのテキストスタイル設定では、テキストをカスタマイズできます。</p><ul><li><strong>色</strong>：可読性を高めるためにテキスト色を変更します。</li><li><strong>フォントの太さ</strong>：強調のためにフォントの太さを選択します。</li><li><strong>水平方向の配置</strong>：アラート内で最適に表示されるように、テキストの配置を選択します</li></ul></td></tr><tr><td><strong>枠線</strong></td><td><p>Avonni Alert コンポーネントの境界線スタイル設定では、境界線の外観をカスタマイズするオプションを提供します。</p><ul><li><strong>色</strong>：境界線の色を選択します。</li><li><strong>サイズ</strong>：境界線の太さを選択します。</li><li><strong>スタイル</strong>：さまざまなスタイルで全体的な見た目や雰囲気を決定します</li></ul></td></tr><tr><td><strong>アイコン</strong></td><td><p>Avonni Alert コンポーネントのアイコンスタイル設定では、アイコンの外観をさまざまにカスタマイズできます。</p><ul><li><strong>背景色</strong>：アイコンの背後にある背景色を変更します。</li><li><strong>前景色</strong>：アイコンのメインカラーを変更します。</li><li><strong>前景の閉じるアイコン</strong>：アラートを閉じるためのアイコンの色を指定します。</li><li><strong>前景色ユーティリティ</strong>：視認性とコントラストを高めるために、さらに色を調整します</li></ul></td></tr></tbody></table>

{% hint style="info" %}
一部のスタイル属性は動的に....
{% endhint %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-alert.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.