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

承認ステータス表示

申請や稟議の承認結果をアイコン付きで示す表示です。ワークフロー系管理画面の一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-03-wrap">
          <span class="d09-09-03-badge d09-09-03-approved"><i class="d09-09-03-ic"></i>承認済み</span>
          <span class="d09-09-03-badge d09-09-03-rejected"><i class="d09-09-03-ic"></i>却下</span>
          <span class="d09-09-03-badge d09-09-03-pending"><i class="d09-09-03-ic"></i>保留</span>
        </div>

CSS

.d09-09-03-wrap{display:flex;flex-direction:column;gap:10px}
        .d09-09-03-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:6px;font-size:13px;font-weight:600;font-family:sans-serif}
        .d09-09-03-ic{width:8px;height:8px;border-radius:50%;display:inline-block}
        .d09-09-03-approved{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
        .d09-09-03-approved .d09-09-03-ic{background:#22c55e}
        .d09-09-03-rejected{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
        .d09-09-03-rejected .d09-09-03-ic{background:#ef4444}
        .d09-09-03-pending{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
        .d09-09-03-pending .d09-09-03-ic{background:#f59e0b}

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