Badge

インポート

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

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

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

基本的な使い方

Badge

<Badge>Badge</Badge>

バリアント

Base (Default)PrimarySecondaryDestructiveSuccessWarningOutline

<Badge>Base (Default)</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="outline">Outline</Badge>

形状

Circle (Default)Square

<Badge shape="circle">Circle (Default)</Badge>
<Badge shape="square">Square</Badge>

インタラクティブ

interactiveプロパティを使用すると、クリック可能なバッジとしてホバー効果とカーソルが適用されます。

interactiveは単独では使えません。onClickまたはonKeyDownとの併用が前提です。 asChildを使っていない場合（生のspanを描画する場合）でも、ハンドラ（onClick/onKeyDownのいずれか）を渡していないとtabIndex/role="button"/Enter・Spaceキーでのクリック発火は自動付与されません。これはServer Componentとして描画される際に関数propsを直列化できずエラーになることを防ぎつつ、何も起きない要素をフォーカス可能にしてしまうa11y上の問題を避けるためです。ハンドラを渡した場合のみ、キーボード操作可能な状態が自動で付与されます（asChildの場合は子要素a等が自前でキーボード操作を持つため付与されません）。

通常クリック可能クリック可能クリック可能クリック回数: 0

{/* 通常のバッジ（ホバー効果なし） */}
<Badge>通常</Badge>
 
{/* クリック可能なバッジ（ホバー効果あり）。onClickを渡すことでtabIndex/role/キーボード操作も自動付与される */}
<Badge interactive onClick={() => setCount((c) => c + 1)}>クリック可能</Badge>
<Badge variant="primary" interactive onClick={() => setCount((c) => c + 1)}>クリック可能</Badge>
<Badge variant="outline" interactive onClick={() => setCount((c) => c + 1)}>クリック可能</Badge>

onClick/onKeyDownを渡す場合、利用側がClient Componentである必要があります（RSCからは関数を渡せないため）。表示のみの用途（interactiveを使わない場合）は/serverからそのまま利用できます。

アイコン付きバッジ

New

完了

注意

エラー

<Badge variant="primary">
  <Icon name="Star" size="xs" />
  New
</Badge>
<Badge variant="success">
  <Icon name="Check" size="xs" />
  完了
</Badge>

実際の使用例

ステータス表示

公開中下書き非公開アーカイブ

<Badge variant="success">公開中</Badge>
<Badge variant="warning">下書き</Badge>
<Badge variant="destructive">非公開</Badge>

カテゴリタグ

ReactTypeScriptTailwind CSS

<Badge variant="outline">React</Badge>
<Badge variant="outline">TypeScript</Badge>

通知カウント

<div className="relative">
  <Icon name="Bell" size="lg" />
  <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs">
    3
  </Badge>
</div>

Props

Prop	Type	Default	Description
`variant`	`'base' \| 'primary' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'outline'`	`'base'`	バッジのスタイルバリアント
`shape`	`'circle' \| 'square'`	`'circle'`	バッジの形状
`interactive`	`boolean`	`false`	ホバー効果とカーソルを適用（クリック可能なバッジに使用）。onClickまたはonKeyDownとの併用が前提。ハンドラを渡し、かつasChildがfalseのときのみtabIndex/role="button"/Enter・Spaceキー操作が自動付与される（ハンドラが無い場合は付与されない）

Badge

On this page