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

予約ステータス表示

予約の状態を段階別に示すバッジです。店舗・施設予約システムの予約一覧画面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-08-wrap">
          <span class="d09-09-08-badge d09-09-08-tentative">仮予約</span>
          <span class="d09-09-08-badge d09-09-08-confirmed">確定</span>
          <span class="d09-09-08-badge d09-09-08-canceled">キャンセル</span>
        </div>

CSS

.d09-09-08-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-family:sans-serif}
        .d09-09-08-badge{display:inline-block;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid transparent}
        .d09-09-08-tentative{background:#fffbeb;color:#b45309;border-color:#fde68a}
        .d09-09-08-confirmed{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
        .d09-09-08-canceled{background:#fef2f2;color:#9ca3af;border-color:#fecaca;text-decoration:line-through}

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