新着
バッジSoft Pill Badges
Tinted pill badges in six colours and three sizes - for tags and categories, not for alarms.
#badge#pill#soft
4 個のフレームワーク初級
Loading…
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
<!--
The dot is aria-hidden and the colour repeats in the text - "Success",
"Failed" - because the colour alone is invisible to a colour-blind reader
and to anyone hearing the page. The word is the badge; the dot decorates it.
-->
<div class="badge-status-row">
<span class="badge-status badge-status--success">
<span class="badge-status__dot" aria-hidden="true"></span>
Success
</span>
<span class="badge-status badge-status--warning">
<span class="badge-status__dot" aria-hidden="true"></span>
Pending review
</span>
<span class="badge-status badge-status--danger">
<span class="badge-status__dot" aria-hidden="true"></span>
Failed
</span>
<span class="badge-status badge-status--info">
<span class="badge-status__dot" aria-hidden="true"></span>
In progress
</span>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
status | 'success' | 'warning' | 'danger' | 'info' | 'info' | Status |
className | string | - | ルート要素にマージされる追加クラス。 |
The rule that shapes everything here: colour is reinforcement, never the message. The dot is `aria-hidden` and the state is spelled out - "Failed", not a red circle - because roughly 1 in 12 men cannot tell the green dot from the red one, and a screen reader cannot see either. To add a status, extend the `STATUS_STYLES` map with a `badge` and `dot` pair; keep the text at the 800 shade on a 50 tint in light mode and at 300 on a translucent wash in dark - 12px medium text is the hardest place on the page to hit 4.5:1, so these pairs are chosen with headroom, not at the limit.