状態バッジ
状態 ／ パターン集トップ
公開/下書き/停止などを短い語で示す。表のセルにも使える
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<ul class="badge-list">
<li><span class="badge badge--ok">公開</span></li>
<li><span class="badge badge--muted">下書き</span></li>
<li><span class="badge badge--danger">停止</span></li>
</ul>.badge-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.badge {
display: inline-flex;
align-items: center;
min-block-size: 1.75rem;
padding: 0 var(--space-3);
font-size: var(--text-sm);
font-weight: 700;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
}
.badge--ok {
border-color: color-mix(in srgb, var(--color-accent-text) 40%, var(--color-border));
color: var(--color-accent-text);
background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
}
.badge--muted {
color: var(--color-text-muted);
background: var(--color-surface);
}
.badge--danger {
border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg));
}確認する#
- 状態語が短く、色だけに頼っていない
- 4.5:1 を下回る組み合わせがない
- 表のセル内でも行高を押し広げすぎない