データとフィードバック@neumorphism-ui/badge

Badge

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

@neumorphism-ui/badge

Registry JSON

プレビュー

DefaultPrimarySoftOutlineDestructive

インストール

npx shadcn@latest add @neumorphism-ui/badge

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<div className="flex gap-2">
  <Badge>デフォルト</Badge>
  <Badge variant="primary">準備完了</Badge>
  <Badge variant="soft">下書き</Badge>
  <Badge variant="destructive">失敗</Badge>
</div>

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ