7onicDESIGN SYSTEM

Badge

상태, 카테고리, 카운트 등 보조 정보를 표시하는 인라인 라벨 컴포넌트로, 6가지 시맨틱 컬러와 3가지 variant를 조합해 다양한 맥락에 대응합니다.

3
Variants
3
Sizes
6
Colors
Pure
React

Playground

Preview
D
Badge
Variant
Color
Size
Radius
Options
<Badge>Badge</Badge>

Variants

Solid
Subtle
Outline
<Badge variant="solid">Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="outline">Outline</Badge>

Colors

6가지 시맨틱 컬러와 3가지 variant를 자유롭게 조합할 수 있습니다.

solid

defaultprimarysuccesswarningerrorinfo

subtle

defaultprimarysuccesswarningerrorinfo

outline

defaultprimarysuccesswarningerrorinfo

Sizes

sm
높이20px
폰트11px
가로 패딩6px
최소 너비20px
default
높이24px
폰트12px
가로 패딩8px
최소 너비24px
lg
높이28px
폰트13px
가로 패딩10px
최소 너비28px

Features

Status Dot

ActivePendingError
<Badge dot color="success">Active</Badge>
<Badge dot color="warning">Pending</Badge>
<Badge dot color="error">Error</Badge>

Icon

FeaturedNewInfo
<Badge icon={<Star />} color="warning" variant="solid">Featured</Badge>
<Badge icon={<Zap />} color="primary" variant="solid">New</Badge>
<Badge icon={<Info />} color="info">Info</Badge>

Counter

31299+5
<Badge color="error" variant="solid">3</Badge>
<Badge color="error" variant="solid">12</Badge>
<Badge color="error" variant="solid">99+</Badge>
<Badge color="primary" variant="solid" size="sm">5</Badge>

Removable

RemovableTag
<Badge removable onRemove={handleRemove}>Removable</Badge>
<Badge removable onRemove={handleRemove} color="primary" variant="solid">Tag</Badge>

API

Props

variant"subtle"
"solid" | "subtle" | "outline"

배지의 시각적 스타일

color"default"
"default" | "primary" | "success" | "warning" | "error" | "info"

시맨틱 컬러

size"default"
"sm" | "default" | "lg"

사이즈 (20/24/28px)

radius"full"
"sm" | "base" | "md" | "lg" | "full"

모서리 둥글기 (2/4/6/8/∞px)

iconundefined
React.ReactNode

앞에 표시할 아이콘

dotfalse
boolean

상태 도트 표시

removablefalse
boolean

삭제 버튼 표시

onRemoveundefined
() => void

삭제 버튼 클릭 콜백

asChildfalse
boolean

Slot 패턴으로 자식 요소로 렌더링

Anatomy

1
2
3
4
Featured
5
Height24px
Padding X8px
gap4px
1
Container
필 형태 컨테이너
2
Dot
도트 (선택)
3
Icon
아이콘 (선택)
4
Label
텍스트 라벨
5
Remove
삭제 버튼 (선택)

Best Practices

✓

권장

  • ✓짧은 텍스트 사용 (1~2단어)
  • ✓의미 있는 컬러를 일관되게 사용
  • ✓상태 표시에는 dot prop 활용
  • ✓삭제 가능한 배지에는 onRemove 설정
✕

지양

  • ✗긴 문장을 배지에 넣지 않기
  • ✗같은 화면에서 여러 색상 과도하게 사용하지 않기
  • ✗인터랙티브 요소로 배지 사용하지 않기
  • ✗장식 목적으로만 배지 사용하지 않기

Accessibility

키보드 조작

Tab삭제 버튼에 포커스 (removable 시)
Enter배지 삭제 (removable 시)

ARIA / WCAG

  • 삭제 버튼에 aria-label="Remove"
  • 아이콘, 도트는 aria-hidden="true"
  • 색상 대비 WCAG AA 준수
  • 삭제 버튼에 포커스 링 표시