Badge
배지(badge)는 컴포넌트의 분류 체계, 구조화된 정보, 상태 정보, 기타 메타 데이터를 표시할 수 있으며 사용자의 주의를 끌기 위해 색상을 활용할 수 있습니다.
Type
Complete
Success
Warning
Fail
상태정보 배지Badge
분류 배지Primary
Default
Primary small
Default small
기타 메타 데이터Anatomy
Complete
Complete
03
01
02
- 텍스트 레이블: 배지를 통해 전달하고자 하는 메타 데이터
- 컨테이너(선택): 배지를 배경과 구분하는 윤곽선
- 아이콘(선택): 배지에 시각적인 상징으로 좌측 표현하여 사용
Size
배지 사이즈는 높이 기준 2가지로 구분됩니다.
Size : md
height : 26px
Size : sm
height : 20px
사용 가이드
명확한 레이블
Badge는 설명이 필요한 구성 요소 위 또는 근처에 배치하고 짧고 명확한 레이블을 노출하여 사용자가 빠르게 이해하고 탐색할 수 있도록 사용합니다.
레이블은 어떤 상태를 설명하는 한두 단어를 목표로 사용합니다.
레이블은 어떤 상태를 설명하는 한두 단어를 목표로 사용합니다.
Do
Don’t
중복 사용
배지는 사용자가 빠르게 정보를 훑어 보는 과정을 돕기 위해 사용된다. 만약 한 항목에 여러 개의 배지가 사용된다면 지나치게 많은 정보가 강조되어 있어 배지의 사용 효과를 감소시킨다.
Do
Don’t