新着
バッジStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 個のフレームワーク初級
Loading…
Bordered badges with no fill - they borrow whatever surface they sit on.
<!--
The outline badge paints no surface - it borrows the page's - so it works
on white cards, tinted panels and photos alike. The cost: the text colour
must clear AA against *any* plausible background, which is why the light
shades stop at 700 and never reach for a 400.
-->
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full border border-gray-300 px-2.5 py-1 text-xs font-medium text-gray-700 dark:border-gray-600 dark:text-gray-300">Draft</span>
<span class="inline-flex items-center rounded-full border border-blue-300 px-2.5 py-1 text-xs font-medium text-blue-700 dark:border-blue-500/40 dark:text-blue-300">Beta</span>
<span class="inline-flex items-center rounded-full border border-green-300 px-2.5 py-1 text-xs font-medium text-green-700 dark:border-green-500/40 dark:text-green-300">Stable</span>
<span class="inline-flex items-center rounded-full border border-amber-300 px-2.5 py-1 text-xs font-medium text-amber-700 dark:border-amber-500/40 dark:text-amber-300">Deprecated</span>
<span class="inline-flex items-center rounded-full border border-red-300 px-2.5 py-1 text-xs font-medium text-red-700 dark:border-red-500/40 dark:text-red-300">Removed</span>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
color | 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'gray' | Color |
className | string | - | ルート要素にマージされる追加クラス。 |
The outline badge paints no background, which is exactly why it composes so well on cards, tinted panels and heroes - and exactly why its text colour is conservative. With no surface of its own, the label must clear AA against anything plausible underneath, so light shades stop at 700 and dark shades sit at 300; resist the urge to lighten them for elegance. The border, by contrast, is decorative and can afford the translucent `/40` treatment in dark mode. Add colours by extending `OUTLINE_COLORS` with the same discipline.