배지

배지 (Badge)

배지는 상태나 라벨을 강조할 때 쓰는 작은 표시 요소예요. 뉴스 표시, 상태 분류, 태그처럼 정보를 한눈에 전달하는 데 사용하죠. 기본 배지뿐 아니라 다양한 variant(변형)을 지원해 상황에 맞게 꾸밀 수 있어요.

출처: 문서

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 배지 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add badge

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

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

variant prop으로 스타일을 바꿀 수 있어요. 아래는 outline variant를 사용한 예시예요.

<Badge variant="outline">Badge</Badge>

badgeVariants 헬퍼를 사용하면 배지처럼 보이는 링크를 만들 수 있어요. 배지 스타일을 클릭 가능한 링크에 그대로 입히고 싶을 때 유용하죠.

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

<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>