Badge

見出し、項目、表の行に短い状態や分類を添える場合に使います。

プレビュー

標準、primary、soft、outline、destructive を並べて比較します。

DefaultPrimarySoftOutlineDestructive

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/badge

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Badge に簡潔な名前を入れ、variant で強調度を選びます。操作が必要な場合はボタンやリンクを使います。

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge variant="primary">Ready</Badge>;
}

5つの variant を備えた軽量な span ベースのコンポーネントです。インタラクションや暗黙の ARIA role を追加せず、視覚的な強調を提供します。

コンポーネント	プロパティ	型	デフォルト	説明
`Badge`	`variant`	`"default" \| "primary" \| "soft" \| "outline" \| "destructive"`	`"default"`	状態の強調度と色を選択します。
`Badge`	`children`必須	`React.ReactNode`	`—`	短い状態または分類ラベルです。
`Badge`	`className`	`string`	`—`	size、余白、色のスタイルを拡張します。