ColoredBadge

import { ColoredBadge } from '@caroainc/ui-components'

<ColoredBadge color="#ef4444">赤</ColoredBadge>
<ColoredBadge color="#22c55e">緑</ColoredBadge>
<ColoredBadge color="#3b82f6">青</ColoredBadge>

const categories = [
  { name: 'フロントエンド', color: '#3b82f6' },
  { name: 'バックエンド', color: '#22c55e' },
  { name: 'デザイン', color: '#f59e0b' },
]
 
{categories.map((cat) => (
  <ColoredBadge key={cat.name} color={cat.color}>
    {cat.name}
  </ColoredBadge>
))}

<ColoredBadge color="#ef4444">緊急</ColoredBadge>
<ColoredBadge color="#f59e0b">対応中</ColoredBadge>
<ColoredBadge color="#22c55e">完了</ColoredBadge>