Lism Tips

Badge（バッジ）

Badge は、「新着」「人気」のような短いラベルを小さな丸い札で見せる部品です。色の変え方、outline の形、大きさの調整をまとめています。

Badge（バッジ）は、「新着」「人気」のような短いラベルを、小さな丸い札で見せる部品です。@lism-css/ui に入っています。

どんなときに使う？#

  • 記事やカードに、分類や状態（「受付中」「終了」など）を小さく付けるとき
  • タグの一覧を並べるとき

使い方#

<span> に b--badge を付けます。枠線だけの形にするときは b--badge--outline を足します。

表示例

新着 新着
html
<div class="l--cluster -g:15">
  <span class="b--badge">新着</span>
  <span class="b--badge b--badge--outline">新着</span>
</div>

ふつうの形は、背景が文字の色（var(--text)）、文字が背景の色（var(--base)）で、色が反対になった札です。文字は小さめ（--fz--xs）で、角は丸（var(--bdrs--99)）です。

色を変える#

背景の色は -bgc と変数 --bgc、outline の文字と枠の色は -c と変数 --c で変えます。

表示例

赤 緑 青 紫
赤 緑 青 紫
html
<div class="l--stack -g:15">
  <div class="l--cluster -g:10">
    <span class="b--badge -bgc" style="--bgc: var(--red)">赤</span>
    <span class="b--badge -bgc" style="--bgc: var(--green)">緑</span>
    <span class="b--badge -bgc" style="--bgc: var(--blue)">青</span>
    <span class="b--badge -bgc" style="--bgc: var(--purple)">紫</span>
  </div>
  <div class="l--cluster -g:10">
    <span class="b--badge b--badge--outline -c" style="--c: var(--red)">赤</span>
    <span class="b--badge b--badge--outline -c" style="--c: var(--green)">緑</span>
    <span class="b--badge b--badge--outline -c" style="--c: var(--blue)">青</span>
    <span class="b--badge b--badge--outline -c" style="--c: var(--purple)">紫</span>
  </div>
</div>

色の名前は red・orange・yellow・green・blue・purple・pink・gray などが使えます。色の一覧は 色のトークン にあります。

u--cbox と組み合わせる#

u--cbox を足して --keycolor で色を決めると、うすく色の付いた背景に、その色に近い文字の札になります。

表示例

Red Orange Blue
html
<div class="l--cluster -g:10">
  <span class="b--badge u--cbox" style="--keycolor: var(--red)">Red</span>
  <span class="b--badge u--cbox" style="--keycolor: var(--orange)">Orange</span>
  <span class="b--badge u--cbox" style="--keycolor: var(--blue)">Blue</span>
</div>

大きさと角を変える#

内側の余白が em（文字の大きさを1とする単位）で決まっているので、-fz で文字を大きくすると札全体も大きくなります。角の丸さは -bdrs で変えます。

表示例

ふつう -fz:s -fz:m
ふつう -bdrs:10 -bdrs:0
html
<div class="l--stack -g:15">
  <div class="l--cluster -g:10 -ai:center">
    <span class="b--badge">ふつう</span>
    <span class="b--badge -fz:s">-fz:s</span>
    <span class="b--badge -fz:m">-fz:m</span>
  </div>
  <div class="l--cluster -g:10 -ai:center">
    <span class="b--badge">ふつう</span>
    <span class="b--badge -bdrs:10">-bdrs:10</span>
    <span class="b--badge -bdrs:0">-bdrs:0</span>
  </div>
</div>

アイコンを入れるときは、札に -ai:center を付けて、文字の前に <svg class="a--icon"> を置きます。

html
<span class="b--badge -ai:center">
  <svg class="a--icon" aria-hidden="true">...</svg>Badge
</span>

専用のクラスと変数#

クラス・変数 意味 初期値
b--badge 札の形 なし
b--badge--outline 枠線だけの形（文字の色の枠） なし
--c 文字の色 var(--base)（outline は var(--text)）
--bgc 背景の色 var(--text)（outline は transparent）
--bdc 枠線の色 transparent（outline は currentColor）
--bdw 枠線の太さ 1px
--hl 行の高さの調整（ハーフレディング） var(--hl--xs)
--cbox-cPct u--cbox と使うとき、文字の色に --keycolor を混ぜる割合 75%

形のちがう札を並べても大きさがずれないように、ふつうの形にも透明な枠線が付いています。

React・Astro で書く場合#

jsx
import { Badge } from '@lism-css/ui/react/Badge';

<Badge>新着</Badge>
<Badge variant="outline" c="red">終了</Badge>
<Badge util="cbox" keycolor="blue">Blue</Badge>

Astro では @lism-css/ui/astro/Badge から読み込みます。

Props 何をするか
variant b--badge--{variant} のクラスを付ける。用意されているのは outline

@lism-css/ui を使わずに作る#

本体のクラスだけでも作れます。

表示例

Badge Badge
html
<div class="l--cluster -g:15">
  <span class="-fz:xs -hl:xs -py:5 -px:10 -bgc:text -c:base -bdrs:99">Badge</span>
  <span class="-fz:xs -hl:xs -py:5 -px:10 -bd -bdc:current -bdrs:99">Badge</span>
</div>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧