Badge

ステータスやカテゴリを表示するためのラベルコンポーネント

Variants

6種類のカラーバリアント

Default

Primary

Success

Warning

Danger

Info

Sizes

3つのサイズオプション

SmallMediumLarge

Rounded

丸いバッジ（ピル型）

DefaultPrimarySuccessWarningDangerInfo

Use Cases

実際の使用例

Status:Active

Category:TechnologyDesign

Priority:HighMediumLow

Version:v1.0.0

With Icons

アイコン付きバッジ

CompletedPendingFailed

Usage

コンポーネントの使用例

tsx

class="token keyword">import { Badge } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">class=class="token keyword">class="token string">"token comment">// Variants
<class="token tag">Badge variant=class="token keyword">class="token string">"class="token keyword">default">Default</class="token tag">Badge>
<class="token tag">Badge variant=class="token keyword">class="token string">"primary">Primary</class="token tag">Badge>
<class="token tag">Badge variant=class="token keyword">class="token string">"success">Success</class="token tag">Badge>
<class="token tag">Badge variant=class="token keyword">class="token string">"warning">Warning</class="token tag">Badge>
<class="token tag">Badge variant=class="token keyword">class="token string">"danger">Danger</class="token tag">Badge>
<class="token tag">Badge variant=class="token keyword">class="token string">"info">Info</class="token tag">Badge>

class="token keyword">class=class="token keyword">class="token string">"token comment">// Sizes
<class="token tag">Badge size=class="token keyword">class="token string">"sm">Small</class="token tag">Badge>
<class="token tag">Badge size=class="token keyword">class="token string">"md">Medium</class="token tag">Badge>
<class="token tag">Badge size=class="token keyword">class="token string">"lg">Large</class="token tag">Badge>

class="token keyword">class=class="token keyword">class="token string">"token comment">// class="token function">Rounded(pill style)
<class="token tag">Badge rounded>Pill Badge</class="token tag">Badge>

class="token keyword">class=class="token keyword">class="token string">"token comment">// With icon
<class="token tag">Badge variant=class="token keyword">class="token string">"success">
  <class="token tag">CheckIcon />
  Completed
</class="token tag">Badge>

Props

コンポーネントのプロパティ

Prop	Type	Default	Description
variant	"default" \| "primary" \| "success" \| "warning" \| "danger" \| "info"	"default"	カラーバリアント
size	"sm" \| "md" \| "lg"	"md"	バッジのサイズ
rounded	boolean	false	ピル型（完全に丸い）スタイル