一覧とデータ / 分類ラベル
Chip
種別や状態を示す小さなラベル。意味と見た目を別々に指定します。
基本的な使い方
SELECT
INSERT
UPDATE
v1.0.0
HTML
<div class="chips">
<span class="chip tone-blue">SELECT</span>
<span class="chip tone-violet">INSERT</span>
<span class="chip tone-teal">UPDATE</span>
<span class="chip chip-ghost">v1.0.0</span>
</div>状態を示す
✓ 解決済み
一部解決
! 未解決
HTML
<div class="chips">
<span class="chip tone-ok">✓ 解決済み</span>
<span class="chip tone-warn">一部解決</span>
<span class="chip tone-danger">! 未解決</span>
</div>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.chip | 標準の分類ラベル。 |
.chip-sm / .chip-lg | 余白を減らしたラベル、または大きいラベル。小型でも文字の読みやすさは保ちます。 |
.chip-ghost | バージョンや識別子を示す輪郭。 |
.tone-blue / .tone-violet / .tone-teal | 識別の色。amber・pink・indigo・slateも使えます。 |
.tone-ok / .tone-warn / .tone-danger | 成功・注意・問題を示す状態の色。 |
使い方の注意
種別の識別に赤を使わないでください。色がなくても意味が残るよう、ラベルに言葉を添えます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。