Badge
상태, 카운트, 레이블을 표시하는 작은 배지 컴포넌트입니다.
기본
공통 color_* 클래스로 의미에 따른 색상을 적용합니다.
DefaultPrimarySuccessWarningDangerInfo
시맨틱 요소
기본은 span이며, as prop으로 콘텐츠 의미에 맞는 HTML 요소 또는 커스텀 컴포넌트를 지정합니다.
처리 상태: 완료
검색 결과 12건
업데이트 확인이 필요합니다.
크기
size prop으로 badge_sm · badge_lg 스케일을 조절합니다.
SmallMediumLarge
Dot 배지
dot prop으로 상태 표시용 점이 포함된 배지를 만듭니다.
OnlineActiveAwayOffline
카운트
count prop으로 숫자·짧은 텍스트를 강조합니다. 99+처럼 긴 값도 표시할 수 있습니다.
31299+5New
겹침 표시
BadgeWrap으로 버튼·아이콘 위에 카운트 또는 점 배지를 겹쳐 표시합니다.
512
API · Badge Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
as | React.ElementType | span | 콘텐츠 의미에 맞는 루트 요소 또는 커스텀 컴포넌트 |
color | string | primary | 공통 color_* 클래스 |
size | 'sm' | 'md' | 'lg' | md | badge_sm · badge_lg |
dot | boolean | false | 텍스트 앞 점 표시 (badge_dot) |
count | boolean | false | 숫자 카운트 형태 (badge_count) |
dotOnly | boolean | false | 점만 표시 (badge_dot-only) |
label | string | — | 배지 텍스트. children으로 대체 가능 |
ariaLabel | string | — | dotOnly·카운트 등 접근성 라벨 |
API · BadgeWrap Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
ariaLabel | string | — | 래퍼 접근성 라벨 (선택) |
API · Badge Children
| Children / Prop | 설명 |
|---|---|
label | 배지 텍스트. children으로 대체 가능 |
children | 배지 텍스트 (label prop 대체) |
API · BadgeWrap Children
| Children / Prop | 설명 |
|---|---|
children | 기준 요소 + Badge 자식 (Vue default 슬롯 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
badge | 배지 루트 |
badge_sm · badge_lg | 크기 변형 |
badge_dot · badge_count · badge_dot-only | 형태 변형 |
badge_wrap | 겹침 배치 컨테이너 |
color_* | 공통 색상 유틸 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--badge-font-size · --badge-padding-y · --badge-padding-x | — | 기본 배지 타이포·패딩 |
--badge-dot-size · --badge-dot-size-sm · --badge-dot-size-lg | 6px · 5px · 7px | 점 크기 |
--badge-count-min-width | 1.25rem | 카운트 최소 너비 |
--badge-overlay-border | 2px | 겹침 시 테두리 |