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

オンライン/オフライン/離席ドット表示

色分けされたドットで在席状態を示す静止表示です。メンバー一覧やチャットUIのステータス表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-01-wrap">
          <div class="d09-09-01-row"><span class="d09-09-01-dot d09-09-01-on"></span><span class="d09-09-01-label">オンライン</span></div>
          <div class="d09-09-01-row"><span class="d09-09-01-dot d09-09-01-away"></span><span class="d09-09-01-label">離席中</span></div>
          <div class="d09-09-01-row"><span class="d09-09-01-dot d09-09-01-off"></span><span class="d09-09-01-label">オフライン</span></div>
        </div>

CSS

.d09-09-01-wrap{display:flex;flex-direction:column;gap:14px;width:100%;max-width:200px}
        .d09-09-01-row{display:flex;align-items:center;gap:10px}
        .d09-09-01-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,0.04)}
        .d09-09-01-on{background:#22c55e}
        .d09-09-01-away{background:#f59e0b}
        .d09-09-01-off{background:#9ca3af}
        .d09-09-01-label{font-size:14px;color:#374151;font-family:sans-serif}

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