배지

컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다.

사용 지침

처리 상태(신청 완료·반려 등)나 새 알림 개수처럼 단어 한두 개로 식별 가능한 정보에 사용하고, 색상만으로 의미를 전달하지 않도록 텍스트와 함께 노출합니다.

Label

examples/badge/BadgeDefault.tsx

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

export default function BadgeDefault() {

defaultsecondarytertiarypointdestructivewarningsuccessinfo

examples/badge/BadgeColors.tsx

import { Badge, type BadgeVariant } from "@/components/ui/badge"

const VARIANTS: ReadonlyArray<BadgeVariant> = [

primary solidprimary outlineprimary pasteldanger soliddanger outlinedanger pastel

examples/badge/BadgeRounded.tsx

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

export default function BadgeRounded() {

중형 (medium)대형 (large)소형 (small)

examples/badge/BadgeSizes.tsx

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

export default function BadgeSizes() {

SolidOutlinePastel

위험경고성공정보

examples/badge/BadgeVariants.tsx

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

export default function BadgeVariants() {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
asChild	boolean	false	—
className	string	—	—
disabled	boolean \| null	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLSpanElement>	—	—
size	"lg" \| "default" \| "small" \| null	—	—
style	CSSProperties	—	—
tabIndex	number	—	—
type	"outline" \| "solid" \| "pastel" \| null	—	—
variant	"default" \| "outline" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "tertiary" \| "point" \| null	—	—