Badge
상태, 카테고리, 라벨을 표시하는 작은 시각적 표시기
개요
Badge 컴포넌트는 간결한 정보를 시각적으로 강조하여 표시하는 컴포넌트입니다.
주요 특징
- ✅ 다양한 Variants: default, secondary, destructive, outline, ghost, link, tertiary
- ✅ 크기 옵션: xs, sm, md, lg, xl 및 icon 사이즈
- ✅ 의미론적 색상: 상태를 나타내는 시각적 단서
- ✅ 유연한 사용: 텍스트, 아이콘, 숫자 표시
- ✅ 접근성: ARIA 속성 지원
- ✅ 디자인 토큰: 테마 커스터마이징 지원
Variants
Badge는 7가지 variant를 지원합니다.
Preview
DefaultSecondaryDestructiveOutlineGhostLinkTertiary
Variant 설명
| Variant | 설명 | 사용 사례 |
|---|---|---|
| default | 기본 스타일, Primary 색상 | 중요한 라벨, 강조 표시 |
| secondary | 보조 스타일 | 일반 태그, 카테고리 |
| destructive | 경고/위험 스타일 | 에러, 삭제, 경고 |
| outline | 테두리만 있는 스타일 | 미니멀 디자인, 부가 정보 |
| ghost | 배경 없는 스타일 | 호버 시 강조 |
| link | 링크 스타일 | 클릭 가능한 태그 |
| tertiary | 3차 스타일 | 보조 정보 |
Sizes
Badge는 5가지 텍스트 크기와 5가지 아이콘 크기를 지원합니다.
텍스트 크기
Preview
Extra SmallSmallMediumLargeExtra Large
아이콘 크기
Preview
아이콘과 함께 사용
Badge 내부에 아이콘을 포함하여 의미를 강화할 수 있습니다.
Preview
Success Warning Error
상태 표시
다양한 상태를 시각적으로 구분하여 표시합니다.
Preview
ActivePendingCompletedFailedDraft
알림 카운트
숫자를 표시하여 알림 개수를 나타냅니다.
Preview
Messages
3
Notifications
12
Updates99+
태그 그룹
관련된 키워드나 카테고리를 Badge로 나열하여 하나의 그룹으로 표시합니다. 예를 들어 기술 스택, 태그 목록, 카테고리 필터 등에서 여러 항목을 시각적으로 묶어 보여줄 때 사용합니다.
Preview
React
TypeScript
Tailwind
Next.js
버전 표시
버전, 베타, 신규 등의 라벨을 표시합니다.
Preview
v2.0BetaNewDeprecated
Variant × Size 조합
모든 variant와 size 조합을 확인할 수 있습니다.
Preview
Default
XSSMMDLGXL
Secondary
XSSMMDLGXL
Destructive
XSSMMDLGXL
Outline
XSSMMDLGXL
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "tertiary" | "default" | Badge의 시각적 스타일 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | "md" | Badge의 크기 |
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | Badge 내용 |
기본 사용법
import { Badge } from "@vortex/ui-foundation"
// 기본
<Badge>Label</Badge>
// Variant 지정
<Badge variant="secondary">Secondary</Badge>
// Size 지정
<Badge size="sm">Small</Badge>
// 조합
<Badge variant="destructive" size="lg">Error</Badge>접근성
ARIA 속성
// 스크린 리더를 위한 설명 추가
<Badge aria-label="3개의 읽지 않은 메시지">3</Badge>
// 상태 설명과 함께 사용
<div>
<span id="status-label">현재 상태:</span>
<Badge aria-labelledby="status-label">Active</Badge>
</div>권장 사항
- ✅ 색상과 함께 텍스트로 의미 전달
- ✅ 숫자만 표시할 경우
aria-label추가 - ✅ 동적으로 변경되는 경우
aria-live사용 - ❌ 색상만으로 의미 전달 지양
관련 컴포넌트
Last updated on