ColoredBadge

インポート

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

個別サブパス（バンドルサイズを抑えたい場合）:

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

基本的な使い方

赤

緑

青

オレンジ

紫

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

組み込みカラーキー（ColorKey）

color にはHEXカラーコードの他に、あらかじめ用意された10種類のカラーキー（Notion風のタグ色）を指定できます。HEXと違い、キーごとに背景色・テキスト色・アクセント色（showAccentの丸）のコントラストが調整済みです。

LIGHT_GRAY

GRAY

BROWN

ORANGE

YELLOW

GREEN

BLUE

PURPLE

PINK

RED

import type { ColorKey } from '@caroainc/ui-components'
 
<ColoredBadge color="BLUE">青</ColoredBadge>
<ColoredBadge color="GREEN">緑</ColoredBadge>
 
// ColorKeyを型として使う場合
const priority: ColorKey = 'RED'
<ColoredBadge color={priority}>緊急</ColoredBadge>

color を省略、または null/未知の文字列を渡した場合は LIGHT_GRAY にフォールバックします。#ef4444 のようなHEXコードを渡した場合はカラーキーとは別ロジックで、指定色を20%の濃さで白と混ぜた薄い背景色が自動生成されます（HEXの場合はテキスト色が #37352F 固定になるため、明るすぎるHEXを指定するとコントラストが弱くなる点に注意してください）。

showAccent（左のドット）

showAccent（デフォルト true）で、バッジ左側のアクセントドット（accentカラーの丸）の表示・非表示を切り替えられます。ドットを消してテキストだけのシンプルなタグ表示にしたい場合は false にします。

ドットあり（デフォルト）

ドットなし

<ColoredBadge color="BLUE" showAccent={false}>ドットなし</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>

ダークモード注意: ColoredBadge の色（カラーキー・HEXいずれも）はテーマトークン（--caroa-*）を経由しない固定値（インラインstyleで直接指定）です。ライトモード基準で調整された配色のため、ダークモードに切り替えても背景・テキスト色は変化しません（他のセマンティックトークン系コンポーネントと異なり dark: で自動追従しません）。ダークモードでも使う画面では、実機でコントラストを目視確認してください。

Props

Prop	Type	Default	Description
`color`	`ColorKey \| string \| null`	`-`	バッジの色。組み込みカラーキー（LIGHT_GRAY/GRAY/BROWN/ORANGE/YELLOW/GREEN/BLUE/PURPLE/PINK/RED）またはHEXカラーコード。省略/null/未知の値はLIGHT_GRAYにフォールバック
`children*`	`ReactNode`	`-`	バッジの内容
`showAccent`	`boolean`	`true`	左側のアクセントドットを表示するか
`className`	`string`	`-`	追加のCSSクラス