Lism CSS
Docs
検索

Badge

バッジを表示できるコンポーネントです。

Overview

↓
Preview
BadgeBadge
<Cluster g="15">
  <Badge>Badge</Badge>
  <Badge variant="outline">Badge</Badge>
</Cluster>

Styles

Badge のベーススタイルは、以下のCSSで定義されています。

_style.css 
@layer lism-block {
  .b--badge {
    --c: var(--base);
    --bgc: var(--text);
    --bdc: transparent;
    --bdw: 1px;
    --hl: var(--hl--xs);

    display: inline-flex;
    color: var(--c);
    background-color: var(--bgc);
    font-size: var(--fz--xs);
    padding: 0.25em 0.5em;
    gap: 0.375em;
    border-radius: var(--bdrs--99);

    /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
    border: solid var(--bdw) var(--bdc);

    /* u--cboxと併用した時に関連する変数 */
    --cbox-cPct: 75%;
  }
  .b--badge--outline {
    --c: var(--text);
    --bgc: transparent;
    --bdc: currentColor;
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでBadge(b--badge)として提供しています。

Import

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

Props

プロパティ 説明
variant b--badge--{variant} クラスを出力します。outlineを用意しています。

Examples

カラーパレットの活用

↓
例
BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<Cluster g="15">
  <Badge>Badge</Badge>
  <Badge bgc="red">Badge</Badge>
  <Badge bgc="orange">Badge</Badge>
  <Badge bgc="yellow">Badge</Badge>
  <Badge bgc="green">Badge</Badge>
  <Badge bgc="blue">Badge</Badge>
  <Badge bgc="purple">Badge</Badge>
  <Badge bgc="pink">Badge</Badge>
  <Badge bgc="gray">Badge</Badge>
</Cluster>

variant: outline

outlineスタイルを標準で用意しています。

↓
variant='outline'
BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge
<Cluster g="15">
  <Badge variant="outline">Badge</Badge>
  <Badge variant="outline" c="red">Badge</Badge>
  <Badge variant="outline" c="orange">Badge</Badge>
  ...
</Cluster>

u--cbox との併用

↓
u--cboxクラスを使ったスタイリングの例
RedOrangeYellowGreenBluePurplePinkGray
<Cluster g="15">
  <Badge util="cbox" keycolor="red">Red</Badge>
  <Badge util="cbox" keycolor="orange">Orange</Badge>
  <Badge util="cbox" keycolor="yellow">Yellow</Badge>
  ...
</Cluster>

スタイルの調整例

paddingをem単位で定義しているため、fzでフォントサイズを変えるとバッジ全体のサイズが追従します。角丸はbdrsで調整できます。

↓
サイズの調整
BadgeBadgeBadge
<Cluster g="15" ai="center">
  <Badge>Badge</Badge>
  <Badge fz="s">Badge</Badge>
  <Badge fz="m">Badge</Badge>
</Cluster>
↓
角丸の調整
BadgeBadgeBadge
<Cluster g="15" ai="center">
  <Badge>Badge</Badge>
  <Badge bdrs="10">Badge</Badge>
  <Badge bdrs="0">Badge</Badge>
</Cluster>

アイコンを使用する例

↓
例
BadgeBadge
import { CheckIcon, TagIcon } from '@lism-css/icons/react';


<Cluster g="15" ai="center">
  <Badge ai="center">
    <Icon icon={CheckIcon} />Badge</Badge>
  <Badge variant="outline" ai="center">
    <Icon icon={TagIcon} />Badge</Badge>
</Cluster>

Without @lism-css/ui

@lism-css/uiを使用せずに、lism-css のみで Badge を構築するコード例を紹介します。

↓
Example
BadgeBadge
<Cluster g="15">
  <Lism as="span" fz="xs" hl="xs" py="5" px="10" bgc="text" c="base" bdrs="99">Badge</Lism>
  <Lism as="span" fz="xs" hl="xs" py="5" px="10" bd bdc="current" bdrs="99">Badge</Lism>
</Cluster>

© 2026 Lism CSS.