CodeConnect Design System

Badge

ステータスやカテゴリーを示すバッジコンポーネント。小さなラベルとして情報を強調表示します。

基本的な使い方

Preview

バリアント

Badgeは5つのバリアントを提供します。

Default

Preview

Primary

Preview

Success

Preview

Warning

Preview

Error

Preview

サイズ

3つのサイズを提供します。

Preview

バリアントとサイズの組み合わせ

Preview

Props

PropTypeDefaultDescription
variant'default' | 'primary' | 'success' | 'warning' | 'error''default'バッジの色
size'sm' | 'md' | 'lg''md'バッジのサイズ
classNamestring-追加のCSSクラス
childrenReactNode-バッジの内容

使用例

ステータス表示:

import { Badge } from '@codeconnect-llc/design-system'


export function OrderStatus({ status }: { status: string }) {
  const statusConfig = {
    pending: { variant: 'warning', label: '処理中' },
    processing: { variant: 'primary', label: '発送準備中' },
    shipped: { variant: 'success', label: '発送済み' },
    delivered: { variant: 'success', label: '配達完了' },
    cancelled: { variant: 'error', label: 'キャンセル' },
  }


  const config = statusConfig[status] || statusConfig.pending


  return (
    <Badge variant={config.variant}>
      {config.label}
    </Badge>
  )
}

カテゴリータグ:

import { Badge } from '@codeconnect-llc/design-system'


export function ArticleCard({ title, categories }) {
  return (
    <div className="border rounded-lg p-4 space-y-3">
      <h3 className="text-lg font-semibold">{title}</h3>
      <div className="flex gap-2">
        {categories.map((category) => (
          <Badge key={category} size="sm" variant="primary">
            {category}
          </Badge>
        ))}
      </div>
    </div>
  )
}


// 使用例
<ArticleCard
  title="React 19の新機能"
  categories={['React', 'JavaScript', 'フロントエンド']}
/>

通知カウント:

import { Badge } from '@codeconnect-llc/design-system'


export function NotificationIcon() {
  const unreadCount = 5


  return (
    <div className="relative">
      <BellIcon className="h-6 w-6" />
      {unreadCount > 0 && (
        <Badge
          size="sm"
          variant="error"
          className="absolute -top-1 -right-1 min-w-[20px] h-5 flex items-center justify-center"
        >
          {unreadCount > 99 ? '99+' : unreadCount}
        </Badge>
      )}
    </div>
  )
}

タスクリスト:

import { Badge } from '@codeconnect-llc/design-system'


export function TaskList({ tasks }) {
  return (
    <div className="space-y-2">
      {tasks.map((task) => (
        <div
          key={task.id}
          className="flex items-center justify-between p-3 border rounded-lg"
        >
          <span>{task.title}</span>
          <div className="flex items-center gap-2">
            <Badge
              size="sm"
              variant={
                task.priority === 'high'
                  ? 'error'
                  : task.priority === 'medium'
                  ? 'warning'
                  : 'default'
              }
            >
              {task.priority}
            </Badge>
            <Badge
              size="sm"
              variant={task.completed ? 'success' : 'primary'}
            >
              {task.completed ? '完了' : '進行中'}
            </Badge>
          </div>
        </div>
      ))}
    </div>
  )
}

ユーザープロフィール:

import { Badge } from '@codeconnect-llc/design-system'


export function UserProfile({ user }) {
  return (
    <div className="flex items-center gap-4">
      <img
        src={user.avatar}
        alt={user.name}
        className="w-12 h-12 rounded-full"
      />
      <div>
        <div className="flex items-center gap-2">
          <h3 className="font-semibold">{user.name}</h3>
          {user.verified && (
            <Badge size="sm" variant="success">
              認証済み
            </Badge>
          )}
          {user.isPremium && (
            <Badge size="sm" variant="primary">
              Premium
            </Badge>
          )}
        </div>
        <p className="text-sm text-text-secondary">{user.role}</p>
      </div>
    </div>
  )
}

フィルターチップ:

import { Badge } from '@codeconnect-llc/design-system'
import { X } from 'lucide-react'


export function FilterChips({ filters, onRemove }) {
  return (
    <div className="flex flex-wrap gap-2">
      {filters.map((filter) => (
        <Badge
          key={filter.id}
          variant="primary"
          className="cursor-pointer hover:opacity-80 flex items-center gap-1"
        >
          {filter.label}
          <button
            onClick={() => onRemove(filter.id)}
            className="ml-1 hover:bg-white/20 rounded-full p-0.5"
          >
            <X className="h-3 w-3" />
          </button>
        </Badge>
      ))}
    </div>
  )
}

新着マーク:

import { Badge } from '@codeconnect-llc/design-system'


export function ProductCard({ product, isNew }) {
  return (
    <div className="border rounded-lg p-4 space-y-3">
      <div className="relative">
        <img
          src={product.image}
          alt={product.name}
          className="w-full h-48 object-cover rounded"
        />
        {isNew && (
          <Badge
            variant="error"
            size="sm"
            className="absolute top-2 right-2"
          >
            NEW
          </Badge>
        )}
      </div>
      <h3 className="font-semibold">{product.name}</h3>
      <p className="text-lg font-bold">¥{product.price.toLocaleString()}</p>
    </div>
  )
}

在庫状況:

import { Badge } from '@codeconnect-llc/design-system'


export function StockStatus({ quantity }) {
  if (quantity === 0) {
    return <Badge variant="error">在庫切れ</Badge>
  }


  if (quantity < 5) {
    return <Badge variant="warning">残りわずか</Badge>
  }


  return <Badge variant="success">在庫あり</Badge>
}