アラート

利用者に重要な情報を伝えたり、時間に敏感な変更などを伝えます。

  • ユーザーに確認をしてもらいたい場合、システムステータスを知らせたい場合にアラートを利用します。
  • Bootstrap と同様、リンクを追加したい場合は class="alert-link、ヘッダーを追加したい場合は class="alert-heading を記述してください。
  • エラー（Warning）、警告（Danger）のように時間に敏感な情報で、すぐに操作をしてもらいたいアラートには role="alert" を記述します。
  • アラートが必要な状態になるまで CSS で不可視状態にすることは避けてください。読み上げブラウザでは不可視でも読み上げてしまう場合があります。
  • 長いフォームの場合は、アラートではなくインラインで情報を見せるようにします。

基本形

変更内容を公開しました。 記事を確認する。
検索キーワード 一致する記事が見つかりませんでした。
<div class="alert alert-success">変更内容を公開しました。 記事を確認する。</div>
<div class="alert alert-info">検索キーワード 一致する記事が見つかりませんでした。</div>
<div class="alert alert-warning" role="alert">置換を実行します。 置換した結果は取り消すことができません。</div>
<div class="alert alert-danger" role="alert">ライセンスの有効期限が切れました。 プラン設定画面より、新しいライセンスを取得するかサイトを削除してください。</div>

閉じるボタン

閉じるボタンを付けたアラートボックスには、.alert-dismissible を追記します。また、.fade .show を加えることでアラートボックスが消えるときのエフェクトを加えることができます。 アクセシビリティ配慮のため、data-dismiss="alert"、aria-label="閉じる" は必ず記述してください。

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
  <strong>検索キーワード</strong><br> 一致する記事が見つかりませんでした。
</div>

アイコン

メッセージが2行以上になっても、アイコンが左上に配置されるようにグリッドレイアウトを適応させます。アラートの入れ子に .d-flex .no-gutters を追記し、アイコンとコンテンツをカラムで制御します。
アイコンの配置バランスを整えるためみ .mr-2 を追記します。

<div class="alert alert-info d-flex no-gutters" role="alert">
  <div class="col-auto"><svg role="img" class="mt-icon--info mr-2"><use xlink:href="../images/sprite.svg#ic_info"  /></svg></div>
  <div class="col"><strong>検索キーワード</strong><br> 一致する記事が見つかりませんでした。</div>
</div>