パーツ番号 09-09-02 ・ CSSのみ

注文ステータスバッジ

EC注文の進行状態を示すバッジです。注文履歴一覧やマイページの注文詳細に配置できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-02-wrap">
          <span class="d09-09-02-badge d09-09-02-processing">処理中</span>
          <span class="d09-09-02-badge d09-09-02-shipped">発送済み</span>
          <span class="d09-09-02-badge d09-09-02-done">完了</span>
        </div>

CSS

.d09-09-02-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
        .d09-09-02-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;font-family:sans-serif;letter-spacing:.02em}
        .d09-09-02-processing{background:#dbeafe;color:#1d4ed8}
        .d09-09-02-shipped{background:#ede9fe;color:#6d28d9}
        .d09-09-02-done{background:#dcfce7;color:#15803d}

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