데이터와 피드백@neumorphism-ui/badge

Badge

다섯 가지 변형을 제공하는 가벼운 span 기반 컴포넌트입니다. 시각적 강조만 제공하고 별도의 상호작용이나 암묵적 ARIA role은 추가하지 않습니다.

@neumorphism-ui/badge

Registry JSON

미리보기

DefaultPrimarySoftOutlineDestructive

설치

npx shadcn@latest add @neumorphism-ui/badge

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

<div className="flex gap-2">
  <Badge>Default</Badge>
  <Badge variant="primary">Ready</Badge>
  <Badge variant="soft">Draft</Badge>
  <Badge variant="destructive">Failed</Badge>
</div>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Badge`	`variant`	`"default" \| "primary" \| "soft" \| "outline" \| "destructive"`	`"default"`	상태의 강조 수준과 색상을 선택합니다.
`Badge`	`children`필수	`React.ReactNode`	`—`	짧은 상태 또는 분류 텍스트입니다.
`Badge`	`className`	`string`	`—`	크기, 간격, 색상을 확장합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성