Lism CSS
Docs
Search

Badge

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

A component for displaying badges.

Overview

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

Styles

The Badge base styles are defined in the following 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;
  }
}

The full source code is available on GitHub.

Usage

Provided as Badge (b--badge) from the @lism-css/ui package.

Import

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

Props

Prop Description
variant Outputs the b--badge--{variant} class. An outline style is provided by default.

Examples

Using the color palette

↓
Example
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

An outline style is available out of the box.

↓
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>

Using with u--cbox

↓
Styling example using the u--cbox class
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>

Adjusting styles

Since the padding is defined in em units, changing the font size with fz scales the whole badge accordingly. The border radius can be adjusted with bdrs.

↓
Adjusting size
BadgeBadgeBadge
<Cluster g="15" ai="center">
  <Badge>Badge</Badge>
  <Badge fz="s">Badge</Badge>
  <Badge fz="m">Badge</Badge>
</Cluster>
↓
Adjusting border radius
BadgeBadgeBadge
<Cluster g="15" ai="center">
  <Badge>Badge</Badge>
  <Badge bdrs="10">Badge</Badge>
  <Badge bdrs="0">Badge</Badge>
</Cluster>

Using with an icon

↓
Example
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

This example builds a Badge with lism-css primitives only, without @lism-css/ui.

↓
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.