Badge
객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨이에요. 사용자의 주의를 끌고 콘텐츠를 빠르게 인지하고 탐색하도록 도와요.
설치
pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/badge.jsonclass-variance-authority, lucide-react 를 설치하고 아래 코드를 components/ui/badge.tsx 에 복사해요.
Anatomy
Badge는 Label을 감싸는 Container로 구성되며, 라벨 앞에 Prefix 아이콘 또는 라벨 뒤에 Action 아이콘 버튼을 가질 수 있어요.
Properties
Size
Badge는 Large, Medium 두 가지 사이즈로 제공돼요.
Tone
Neutral, Brand, Informative, Positive, Warning, Critical 여섯 가지 색상으로 구성되어 있으며, 전달하고자 하는 의미와 맥락에 맞게 사용할 수 있어요.
Variant
시각적인 주목도에 따라 선택해 사용할 수 있도록 Solid, Outline, Weak 세 가지 Variant를 제공해요.
Prefix
Prefix는 라벨 앞에 아이콘을 표시해 의미나 상태를 보조하는 요소예요. 라벨만으로 의미를 바로 전달하기 어려운 경우, 아이콘으로 빠른 인지를 도와요.
예를 들어 상태, 카테고리, 유형 등이 명확히 구분되어야 하는 상황에서 Prefix를 활용하면 사용자가 더 빠르게 정보를 파악할 수 있어요. 아이콘은 기본적으로 Fill 스타일을 사용해요.
Action
Action은 라벨 뒤에 고정된 (i) 아이콘 버튼을 제공하며, Help Bubble이나 Bottom Sheet 등으로 배지에 관한 추가 설명을 보여주는 용도로 사용해요. 라벨만으로 담기 어려운 세부 정보를 사용자가 요청해 확인할 수 있어요.
actionProps 에는 정보 아이콘 버튼의 접근성 이름인 aria-label 을 반드시 전달해요. 버튼을 Popover나 Bottom Sheet 트리거로 감싸려면 actionProps.render 를 사용해요.
Prefix와 Action은 서로 다른 레이아웃 옵션이므로 동시에 사용할 수 없어요.
Truncating
긴 라벨을 한 줄로 줄여 표시하려면 max-w-* 로 최대 너비를 지정해요. 지정한 너비를 넘는 내용은 말줄임표로 표시돼요.
Guidelines
적절한 스타일 사용하기
Badge는 Solid, Outline, Weak 세 가지 스타일을 제공해요. 각 스타일은 강조도와 시각적 무게감이 다르므로 상황에 맞게 선택하는 것이 중요해요.
| Style | 사용 상황 |
|---|---|
| Solid | 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우, 텍스트가 잘 읽히도록 명도 대비가 높은 Solid 스타일을 사용해요. 강한 주목도가 필요한 경우에도 사용할 수 있어요. |
| Outline | 중간 정도의 주목도를 가진 Outline 스타일은 본문 또는 상세 화면에서 사용해요. |
| Weak | 반복적인 구조를 가진 환경에서는 과도하게 강조된 Badge가 시각적 부담을 줄 수 있어요. 이런 경우에는 주목도가 낮은 Weak 스타일이 더 적합해요. |
Brand 컬러는 꼭 필요한 곳에만 사용하기
Brand 컬러는 브랜드의 정체성과 가치를 전달하는 중요한 자산으로, 로고, 대표 버튼, 핵심 메시지 등 브랜드 상징 요소에 집중해서 사용해야 해요.
Badge는 부가 정보를 전달하는 보조 요소라서, 브랜드 컬러를 과하게 사용하면 의미와 강조도가 분산돼요. 서비스의 핵심 가치를 전달하는 곳에만 사용해요.
Brand 컬러는 서비스의 핵심 의미를 전달하는 Badge에만 사용해요.
Brand 컬러를 과하게 사용하면 무엇이 중요한지 알기 어려워요.
Badge의 활용
카테고리 표시
Badge는 콘텐츠를 그룹화하거나 분류하는 카테고리 태그로 활용할 수 있어요. 이때는 Weak 스타일을 권장해요.
부가 정보 및 혜택 전달
Badge는 주요 정보뿐만 아니라 사용자에게 유용한 부가 정보를 전달하는 데도 활용할 수 있어요. 이런 경우 사용자의 시선을 끌면서도 주요 콘텐츠를 방해하지 않도록 Weak 스타일을 적용해요.
상태 표시
Badge로 항목의 현재 상태를 간결하게 표현할 수 있어요. 사용자가 상태를 직관적으로 파악할 수 있도록 각 상태에 맞는 컬러를 사용해요.
| Tone | 사용 예시 |
|---|---|
| Neutral | 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태 |
| Informative | 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지 |
| Positive | 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과 |
| Warning | 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태 |
| Critical | 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패 |
너무 많은 Badge를 나열하지 않기
Badge는 정보 전달에 효과적이지만, 한 화면이나 요소에 너무 많은 Badge를 나열하면 오히려 시각적 혼란을 줄 수 있어요. 중요한 정보만 골라 최소화하고, 하나의 객체에는 1~2개 이하의 Badge만 사용하는 것을 권장해요.
하나의 객체에는 핵심 정보만 Badge로 보여줘요.
너무 많은 Badge를 나열하는 것은 피해요.
너무 긴 라벨을 사용하지 않기
Badge는 짧고 명확한 정보를 전달하는 데 최적화된 UI 요소예요. 라벨이 너무 길어지면 컴포넌트의 형태가 깨지거나 레이아웃을 해칠 수 있고, 읽기에도 불편해요. 가능하면 2~3단어 이내로 간결하게 작성하고, 필요하면 말줄임을 고려해요.
2~3단어 이내로 간결하게 작성해요.
너무 긴 라벨이 표시되지 않도록 주의해요.
버튼처럼 클릭 가능한 요소로 사용하지 않기
Badge는 정적인 정보 전달에 적합한 컴포넌트이며, 사용자의 클릭을 유도하는 행동 요소(CTA)로 사용하는 것은 권장하지 않아요. 액션이 필요한 경우엔 Chip, Toggle Button, 또는 Action Button 컴포넌트를 사용해요.
Props
Prop
Type