Badge

インポート

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

基本的な使い方

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>

アイコン付きバッジ

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'`	バッジの形状

Badge

On this page