Badge

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

対応するHTML構造

<span class="c--badge">Badge</span>

主なprops

keycolor: バッジのキーカラー。デフォルトはmainカラーです。
- パレットカラーを指定できます。("red", "blue", "green", "yellow", "purple", "orange", "pink", "gray"
variant: ボタンの表示スタイル。outline、subtleの2種類を標準で用意しています。
- c--badge--{variant}がクラスとして出力されます。

Import

import { Badge } from '@loos/lism-core';

DEMO

<Badge>の使用例

BadgeBadgeBadge

<Badge>Badge</Badge>
<Badge variant="fill">Badge</Badge>
<Badge variant="outline">Badge</Badge>

カラー

カラートークンの他、任意のカラーコードを指定できます。

variant="fill"でのカラーバリエーション

redorangeyellowgreenbluepurplepinkgraymainaccent

<Badge keycolor="red">Badge</Badge>
<Badge keycolor="orange">Badge</Badge>
...

variant="outline"でのカラーバリエーション

redorangeyellowgreenbluepurplepinkgraymainaccent

variant="subtle"(is--cboxが出力されます) でのカラーバリエーション

redorangeyellowgreenbluepurplepinkgraymainaccent

カラーコード指定

BadgeBadgeBadge

<Cluster gap={20}>
	<Badge bgc="blue:20%" c="base">Badge</Badge>
	<Badge variant="fill" keycolor="#ac2c23">Badge</Badge>
	<Badge variant="subtle" keycolor="hsl(260deg 75% 40%)">Badge</Badge>
</Cluster>

アイコンを併用する例

<InlineIcon>の使用例

Badge Badge

<Cluster gap={20}>
	<Badge variant='fill' d='inline-flex' flex={{ai: 'center', gap: 'em2'}}>
		<Icon icon={Book} size="1.25em"/>Badge
	</Badge>
	<Badge variant='outline' d='inline-flex' flex={{ai: 'center', gap: 'em2'}}>
		<Icon icon={Cat} size="1.25em"/>Badge
	</Badge>
</Cluster>

Button Alert