コンテンツにスキップ
Lism CSS

Badge

バッジを表示するコンポーネントの作成例を紹介します。

↓
Preview
Badge Badge 
<Flex g='20'>
  <Badge>Badge</Badge>
  <Badge variant='outline'>Badge</Badge>
</Flex>

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Badge from '@/components/lism/Badge/index.jsx';

Props

Section titled “Props”
プロパティ説明
variantc--badge--{variant} クラスを出力します。

Usage

Section titled “Usage”
↓
<Badge>の使用例
Badge Badge 
<Flex variant='cluster' g='20'>
  <Badge bgc='main' fz='s'>Badge</Badge>
  <Badge bgc='#549005' fz='s' bdrs='99'>Badge</Badge>
</Flex>

Variants

Section titled “Variants”

outlineを標準で用意しています。

↓
variant='outline'
Badge Badge 
<Flex variant='cluster' g='20'>
  <Badge variant='outline' c='main'>Badge</Badge>
  <Badge variant='outline' c='#549005' px='20' bdrs='99'>Badge</Badge>
</Flex>

u--colbox との併用

Section titled “u--colbox との併用”
↓
u--colboxクラスを使ったスタイリングの例
Badge Badge 
<Flex variant='cluster' g='20'>
  <Badge className='u--colbox' keycol='main'>Badge</Badge>
  <Badge className='u--colbox' keycol='#549005' bdc='keycol:base:40%' px='20' bdrs='99'>Badge</Badge>
</Flex>

アイコンを使用する例

Section titled “アイコンを使用する例”
↓
例
Badge Badge 
<Flex g='30' ai='c'>
  <Badge d='if' ai='c'><Icon offset='-10%' icon='star'/>Badge</Badge>
  <Badge variant='outline' d='if' ai='c'><Icon offset='-10%' icon={Book}/>Badge</Badge>
</Flex>

カラーとスタイルのバリエーション

Section titled “カラーとスタイルのバリエーション”

PALETTEトークンを使った例を紹介します。

↓
基本状態でのカラーバリエーションの例
Red Orange Yellow Green Blue Purple Pink Gray 
<Flex variant='cluster' g='20'>
  <Badge bgc='red'>Red</Badge>
  <Badge bgc='orange'>Orange</Badge>
  <Badge bgc='yellow'>Yellow</Badge>
  <Badge bgc='green'>Green</Badge>
  <Badge bgc='blue'>Blue</Badge>
  <Badge bgc='purple'>Purple</Badge>
  <Badge bgc='pink'>Pink</Badge>
  <Badge bgc='gray'>Gray</Badge>
</Flex>
↓
variant='outline'でのカラーバリエーションの例
Red Orange Yellow Green Blue Purple Pink Gray 
<Flex variant='cluster' g='20'>
  <Badge variant='outline' c='red'>Red</Badge>
  <Badge variant='outline' c='orange'>Orange</Badge>
  <Badge variant='outline' c='yellow'>Yellow</Badge>
  <Badge variant='outline' c='green'>Green</Badge>
  <Badge variant='outline' c='blue'>Blue</Badge>
  <Badge variant='outline' c='purple'>Purple</Badge>
  <Badge variant='outline' c='pink'>Pink</Badge>
  <Badge variant='outline' c='gray'>Gray</Badge>
</Flex>
↓
u--colboxを使った場合のカラーバリエーションの例
Red Orange Yellow Green Blue Purple Pink Gray 
<Flex variant='cluster' g='20'>
  <Badge className='u--colbox' keycol='red'>Red</Badge>
  <Badge className='u--colbox' keycol='orange'>Orange</Badge>
  <Badge className='u--colbox' keycol='yellow'>Yellow</Badge>
  <Badge className='u--colbox' keycol='green'>Green</Badge>
  <Badge className='u--colbox' keycol='blue'>Blue</Badge>
  <Badge className='u--colbox' keycol='purple'>Purple</Badge>
  <Badge className='u--colbox' keycol='pink'>Pink</Badge>
  <Badge className='u--colbox' keycol='gray'>Gray</Badge>
</Flex>