7onicDESIGN SYSTEM

Badge

Badgeは、ステータス、カテゴリ、カウントなどの補助情報を表示するためのインラインラベルコンポーネントです。6つのセマンティックカラーと3つのバリアントを組み合わせて、多様なコンテキストに対応します。

3
Variants
3
Sizes
6
Colors
Pure
React

Playground

Preview
D
Badge
Variant
Color
Size
Radius
Options
<Badge>Badge</Badge>

Variants

Solid
Subtle
Outline
<Badge variant="solid">Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="outline">Outline</Badge>

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

Features

Status Dot

ActivePendingError
<Badge dot color="success">Active</Badge>
<Badge dot color="warning">Pending</Badge>
<Badge dot color="error">Error</Badge>

Icon

FeaturedNewInfo
<Badge icon={<Star />} color="warning" variant="solid">Featured</Badge>
<Badge icon={<Zap />} color="primary" variant="solid">New</Badge>
<Badge icon={<Info />} color="info">Info</Badge>

Counter

31299+5
<Badge color="error" variant="solid">3</Badge>
<Badge color="error" variant="solid">12</Badge>
<Badge color="error" variant="solid">99+</Badge>
<Badge color="primary" variant="solid" size="sm">5</Badge>

Removable

RemovableTag
<Badge removable onRemove={handleRemove}>Removable</Badge>
<Badge removable onRemove={handleRemove} color="primary" variant="solid">Tag</Badge>

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)

iconundefined
React.ReactNode

先頭に表示するアイコン

dotfalse
boolean

ステータスドットを表示

removablefalse
boolean

削除ボタンを表示

onRemoveundefined
() => void

削除ボタンのクリックコールバック

asChildfalse
boolean

Slotパターンで子要素として描画

Anatomy

1
2
3
4
Featured
5
Height24px
Padding X8px
gap4px
1
Container
ピル型コンテナ
2
Dot
ドット（オプション）
3
Icon
アイコン（オプション）
4
Label
テキストラベル
5
Remove
削除ボタン（オプション）

Best Practices

✓

推奨

  • ✓短いテキストを使用する（1～2語）
  • ✓意味のあるカラーを一貫して使用する
  • ✓ステータスにはdot propを活用する
  • ✓削除可能なバッジにはonRemoveを設定する
✕

避けるべき

  • ✗長い文章をバッジに入れない
  • ✗同じ画面で多色を過剰に使わない
  • ✗インタラクティブ要素としてバッジを使用しない
  • ✗装飾目的のみにバッジを使用しない

Accessibility

キーボード操作

Tab削除ボタンにフォーカス（removable時）
Enterバッジを削除（removable時）

ARIA / WCAG

  • 削除ボタンに aria-label="Remove"
  • アイコン・ドットは aria-hidden="true"
  • カラーコントラストはWCAG AA準拠
  • 削除ボタンにfocus-ring表示