Badge
Badgeは、ステータス、カテゴリ、カウントなどの補助情報を表示するためのインラインラベルコンポーネントです。 6つのセマンティックカラーと3つのバリアントを組み合わせて、多様なコンテキストに対応します。
3
Variants
3
Sizes
6
Colors
Pure
React
Playground
Preview
D24px
Badge
Variant
Color
Size
Radius
Options
<Badge>Badge</Badge>Variants
Solid
Subtle
Outline
Colors
6つのセマンティックカラーを3つのバリアントと自由に組み合わせられます。
solid
defaultprimarysuccesswarningerrorinfo
subtle
defaultprimarysuccesswarningerrorinfo
outline
defaultprimarysuccesswarningerrorinfo
Sizes
sm高さ20px
フォント11px
横パディング6px
最小幅20px
default高さ24px
フォント12px
横パディング8px
最小幅24px
lg高さ28px
フォント13px
横パディング10px
最小幅28px
| Size | 高さ / 最小幅 | フォント | 横パディング | テキスト | カウント |
|---|---|---|---|---|---|
sm | 20px | 11px | 6px | Badge | 3 |
default | 24px | 12px | 8px | Badge | 3 |
lg | 28px | 13px | 10px | Badge | 3 |
Features
Status Dot
ActivePendingError
Icon
FeaturedNewInfo
Counter
31299+5
Removable
RemovableTag
API
Props
variant"subtle""solid" | "subtle" | "outline"バッジのビジュアルスタイル
color"default""default" | "primary" | "success" | "warning" | "error" | "info"セマンティックカラー
size"default""sm" | "default" | "lg"サイズ (20/24/28px)
radius"full""sm" | "base" | "md" | "lg" | "full"角丸の大きさ (2/4/6/8/∞px)
iconundefinedReact.ReactNode先頭に表示するアイコン
dotfalsebooleanステータスドットを表示
removablefalseboolean削除ボタンを表示
onRemoveundefined() => void削除ボタンのクリックコールバック
asChildfalsebooleanSlotパターンで子要素として描画
| Name | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "subtle" | "outline" | "subtle" | バッジのビジュアルスタイル |
color | "default" | "primary" | "success" | "warning" | "error" | "info" | "default" | セマンティックカラー |
size | "sm" | "default" | "lg" | "default" | サイズ (20/24/28px) |
radius | "sm" | "base" | "md" | "lg" | "full" | "full" | 角丸の大きさ (2/4/6/8/∞px) |
icon | React.ReactNode | undefined | 先頭に表示するアイコン |
dot | boolean | false | ステータスドットを表示 |
removable | boolean | false | 削除ボタンを表示 |
onRemove | () => void | undefined | 削除ボタンのクリックコールバック |
asChild | boolean | false | Slotパターンで子要素として描画 |