Badge
배지는 알림, 읽지 않은 메시지 수 등 중요한 정보를 강조 표시하는 컴포넌트입니다. 텍스트에 대한 부가 정보를 전달하는 용도로 주로 사용합니다.
Figma 컴포넌트: Base components/Badge
Type
Badge는 두 가지 형태를 제공합니다.
Pill (완전 둥근 형태)
type="pill" (기본값) - 완전히 둥근 형태입니다.
Badge (약간 둥근 형태)
type="badge" - 약간만 둥근 형태입니다.
Color
12가지 색상 변형을 지원합니다.
Size
3가지 크기를 지원합니다: sm (22px), md (24px), lg (28px).
With Dot Indicator
icon="dot" - 상태 표시 점(dot)이 포함된 배지입니다.
With Icon
icon="icon" - 아이콘이 포함된 배지입니다.
조합 예시
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | 배지 텍스트 내용 |
size | sm | md | lg | md | 배지 크기 (sm: 22px, md: 24px, lg: 28px) |
color | gray | brand | error | warning | success | grayBlue | blueLight | blue | indigo | purple | pink | orange | gray | 배지 색상 |
type | pill | badge | pill | 배지 형태 (pill: 완전 둥근, badge: 약간 둥근) |
icon | false | dot | icon | circle | false | 아이콘 유형 (dot: 상태 점, icon: 별 아이콘, circle: 원형 아이콘) |
Figma Variants
| Property | Values |
|---|---|
| Size | sm md lg |
| Color | Gray Brand Error Warning Success Gray blue Blue light Blue Indigo Purple Pink Orange |
| Icon | False Dot Icon Avatar Country |
| Type | Pill Badge |