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