データ可視化・ダッシュボード
バッジ
ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="bg-wrap">
<div class="bg-group">
<span class="bg-group-title">ステータス</span>
<div class="bg-row">
<span class="bg-pill bg-success"><span class="bg-dot" aria-hidden="true"></span>成功</span>
<span class="bg-pill bg-warning"><span class="bg-dot" aria-hidden="true"></span>警告</span>
<span class="bg-pill bg-error"><span class="bg-dot" aria-hidden="true"></span>エラー</span>
<span class="bg-pill bg-info"><span class="bg-dot" aria-hidden="true"></span>情報</span>
</div>
</div>
<div class="bg-group">
<span class="bg-group-title">件数・通知</span>
<div class="bg-row bg-row--wide">
<span class="bg-icon-badge">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 20a2 2 0 004 0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
<span class="bg-count" aria-label="通知8件">8</span>
</span>
<span class="bg-icon-badge">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 6h16v12H4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 7l8 6 8-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="bg-count bg-count--dot" aria-label="未読あり"></span>
</span>
<span class="bg-bubble" aria-label="99件以上">99+</span>
<span class="bg-new">NEW</span>
</div>
</div>
</div>