アラート

汎用アラート

汎用アラートのコンポーネントにはsu-alertのクラス名を付与します。

文脈に応じてdiv要素、もしくはp要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。背景塗りや境界線が加わります。

ユーザーに向けて注意や行動を促すなど、前後の文脈に沿って強調させたメッセージを表示します。

<div class="su-alert" role="alert">汎用アラートのメッセージテキスト</div>

汎用アラートの背景や文字、境界線の色はCSS変数を使って変更することが可能です。

.su-alert {
  --su-color-bg-alert: yellow;
  --su-color-border-alert: red;
  --su-color-text-alert: pink;
}

状態アラート

状態アラートのコンポーネントには、設定する状態に合わせてsu-alert-[STATE_NAME]のクラス名を付与します。ステータスカラーのカラー名でも採用されている、error、warning、success、info、negativeの状態名をサフィックスとすることで、状態に合わせたスタイルが適用されたアラートを表示できます。

文脈に応じてdiv要素、もしくはp要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。背景塗りや境界線が加わります。

ユーザーに向けて注意や行動を促すなど、状態に合わせてスタイリングされたメッセージを表示します。

<div class="su-alert-error" role="alert">エラー・禁止の状態を示すメッセージテキスト</div>
<div class="su-alert-warning" role="alert">注意・警告の状態を示すメッセージテキスト</div>
<div class="su-alert-success" role="alert">成功・許可・完了の状態を示すメッセージテキスト</div>
<div class="su-alert-info" role="alert">通知・進行中の状態を示すメッセージテキスト</div>
<div class="su-alert-negative" role="alert">中止・終了の状態を示すメッセージテキスト</div>

アイコンの表示

汎用アラート、状態アラート共にsu-alert-add-iconクラスを追加することで、アラートの内容に合わせたアイコンをアラート内部の左上に表示させることができます。

アイコンが表示されることで、アラート内のメッセージがどういった意味を持っているかをより明確に伝えることができます。

<div class="su-alert su-alert-add-icon" role="alert">
  汎用アラートのメッセージテキスト（アイコン付き）
</div>
<div class="su-alert-error su-alert-add-icon" role="alert">
  エラー・禁止の状態を示すメッセージテキスト（アイコン付き）
</div>
<div class="su-alert-warning su-alert-add-icon" role="alert">
  注意・警告の状態を示すメッセージテキスト（アイコン付き）
</div>
<div class="su-alert-success su-alert-add-icon" role="alert">
  成功・許可・完了の状態を示すメッセージテキスト（アイコン付き）
</div>
<div class="su-alert-info su-alert-add-icon" role="alert">
  通知・進行中の状態を示すメッセージテキスト（アイコン付き）
</div>
<div class="su-alert-negative su-alert-add-icon" role="alert">
  中止・終了の状態を示すメッセージテキスト（アイコン付き）
</div>

状態アラートについては、各種ステータスカラーに対応したアイコン色になりますが、汎用アラートのアイコン色については、CSS変数を使って変更することが可能です。

.su-alert {
  --su-color-icon-alert: red;
}

閉じるボタンの設置

汎用アラート、状態アラート共にsu-alert-add-closeクラスを追加し、su-alert-closeのクラスを指定したボタンを子要素に入れることで、アラート内部の右上に閉じるボタンを設置することができます。ボタンはbutton要素を使ってマークアップします。

※ボタン要素の中はテキストや子要素など、何も含めないようにしてください。

一時的な通知内容など、ユーザーによって非表示にさせたい場合に、その処理のトリガーとなるボタンを表示させます。

<div class="su-alert su-alert-add-close" role="alert">
  <p>汎用アラートのメッセージテキスト</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert su-alert-add-icon su-alert-add-close" role="alert">
  <p>汎用アラートのメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert-error su-alert-add-icon su-alert-add-close" role="alert">
  <p>エラー・禁止の状態を示すメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert-warning su-alert-add-icon su-alert-add-close" role="alert">
  <p>注意・警告の状態を示すメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert-success su-alert-add-icon su-alert-add-close" role="alert">
  <p>成功・許可・完了の状態を示すメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert-info su-alert-add-icon su-alert-add-close" role="alert">
  <p>通知・進行中の状態を示すメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>
<div class="su-alert-negative su-alert-add-icon su-alert-add-close" role="alert">
  <p>中止・終了の状態を示すメッセージテキスト（アイコン付き）</p>
  <button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>

状態アラートについては、各種ステータスカラーに対応したボタン色になりますが、汎用アラートのボタン色については、CSS変数を使って変更することが可能です。

.su-alert {
  --su-color-close-alert: red;
}

閉じるボタンのクリック等でアラートコンポーネントを非表示（または削除）にさせる場合には、JavaScriptを使って処理を実装する必要があります。以下は閉じるボタンのクリックでアラートを削除する例になります。

document.querySelector('.su-alert-close').addEventListener('click', (event) => {
  const target = event.currentTarget as HTMLElement;
  target.parentElement?.remove();
});

アクセシビリティの支援

アラートのコンポーネントはアクセシビリティの対応として、role="alert"属性値を付与することで、スクリーンリーダーに対してアラートであることを明示することができます。また、閉じるボタンを採用する場合にはボタン要素に対してaria-label属性でスクリーンリーダー使用時のラベルテキストの設定を行い、aria-live="off"属性値を付与することで閉じるボタンが押されたときに、スクリーンリーダーがこのボタンに関連する更新を読み上げないようにします。

<div class="su-alert su-alert-add-close" role="alert">
<p>汎用アラートのメッセージテキスト</p>
<button type="button" class="su-alert-close" aria-label="アラートを閉じる" aria-live="off"></button>
</div>