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>;
}

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

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