パーツ番号 09-04-05 ・ CSSのみ

アイコン付きバッジ

小さなインラインSVGアイコンとテキストを組み合わせたバッジの見本です。状態や種別を視覚的に伝えたい一覧表示などに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-05-wrap">
          <span class="d09-04-05-badge d09-04-05-green">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            承認済み
          </span>
          <span class="d09-04-05-badge d09-04-05-amber">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v5"/><circle cx="12" cy="16.2" r=".4" fill="#fff" stroke="none"/><circle cx="12" cy="12" r="9"/></svg>
            要確認
          </span>
          <span class="d09-04-05-badge d09-04-05-blue">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17.3 6.2 20l1.1-6.4L2.6 9l6.5-1L12 2.2 14.9 8l6.5 1-4.7 4.6 1.1 6.4z"/></svg>
            お気に入り
          </span>
        </div>

CSS

.d09-04-05-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
        .d09-04-05-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:14px;color:#fff}
        .d09-04-05-green{background:#16a34a}
        .d09-04-05-amber{background:#d97706}
        .d09-04-05-blue{background:#2563eb}

クラス名 .d09-04-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。