マイクロ・フィードバック
アラート・バナー
情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="alerts" id="alerts">
<div class="alert alert--info" role="status">
<span class="alert-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.6"/>
<line x1="9" y1="8" x2="9" y2="13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="9" cy="5.4" r="1" fill="currentColor"/>
</svg>
</span>
<p class="alert-msg">新しいバージョンが利用できます。</p>
<button class="alert-close" aria-label="閉じる">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="alert alert--success" role="status">
<span class="alert-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.6"/>
<polyline points="5.5,9.2 8,11.5 12.5,6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<p class="alert-msg">保存が完了しました。</p>
<button class="alert-close" aria-label="閉じる">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="alert alert--warning" role="alert">
<span class="alert-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M9 2.5l6.5 12h-13z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<line x1="9" y1="7" x2="9" y2="10.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="9" cy="12.8" r="1" fill="currentColor"/>
</svg>
</span>
<p class="alert-msg">まもなく容量の上限に達します。</p>
<button class="alert-close" aria-label="閉じる">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="alert alert--error" role="alert">
<span class="alert-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.6"/>
<line x1="6" y1="6" x2="12" y2="12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="12" y1="6" x2="6" y2="12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</span>
<p class="alert-msg">送信に失敗しました。もう一度お試しください。</p>
<button class="alert-close" aria-label="閉じる">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<line x1="3" y1="3" x2="11" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="11" y1="3" x2="3" y2="11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<button class="reset-btn" id="resetBtn" hidden>すべて再表示</button>
</div>