Badge
バッジを表示するコンポーネントの作成例を紹介します。
↓
Preview
Badge Badge
<Flex g='20'> <Badge>Badge</Badge> <Badge variant='outline'>Badge</Badge></Flex>Import
ソースコードを手動でコピー&ペーストしてご利用ください。
Props
| プロパティ | 説明 |
|---|---|
variant | b--badge--{variant} クラスを出力します。 |
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
outlineを標準で用意しています。
↓
variant='outline' Badge Badge
<Flex variant='cluster' g='20'> <Badge variant='outline' c='main'>Badge</Badge> <Badge variant='outline' c='#549005' bdrs='99'>Badge</Badge></Flex>u--colored との併用
↓
u--coloredクラスを使ったスタイリングの例 Badge Badge
<Flex variant='cluster' g='20'> <Badge className='u--colored' keycolor='main'>Badge</Badge> <Badge className='u--colored' keycolor='#549005' bdrs='99'>Badge</Badge></Flex>アイコンを使用する例
↓
例
Badge Badge
<Flex g='30' ai='c'> <Badge d='if' g='5' ai='c'><Icon icon='star'/>Badge</Badge> <Badge variant='outline' d='if' g='5' ai='c'><Icon icon={Book}/>Badge</Badge></Flex>カラーとスタイルのバリエーション
PALETTEトークンを使った例を紹介します。
↓
基本状態でのカラーバリエーションの例
red orange yellow green blue purple pink gray
<Badge bgc={color}>{color}</Badge> ↓
variant='outline'でのカラーバリエーションの例 red orange yellow green blue purple pink gray
<Badge variant='outline' c={color}>{color}</Badge> ↓
u--coloredを使った場合のカラーバリエーションの例 red orange yellow green blue purple pink gray
<Badge className='u--colored' keycolor={color}>{color}</Badge>