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

ピル型ステータスラベル

丸みの強いピル型で複数のステータスを並べた見本です。タスク管理画面や案件一覧の進行状況表示にそのまま利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-10-wrap">
          <span class="d09-04-10-pill d09-04-10-active">対応中</span>
          <span class="d09-04-10-pill d09-04-10-done">完了</span>
          <span class="d09-04-10-pill d09-04-10-pending">保留</span>
          <span class="d09-04-10-pill d09-04-10-cancel">中止</span>
        </div>

CSS

.d09-04-10-wrap{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
        .d09-04-10-pill{display:inline-block;font-size:12px;font-weight:700;padding:5px 16px;border-radius:999px}
        .d09-04-10-active{background:#dbeafe;color:#1d4ed8}
        .d09-04-10-done{background:#dcfce7;color:#15803d}
        .d09-04-10-pending{background:#fef3c7;color:#b45309}
        .d09-04-10-cancel{background:#f1f5f9;color:#64748b}

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