배지는 UI 요소에 상태나 값을 숫자 또는 특수문자로 표시하는 시각적 표시기(indicator) 입니다.
Usage
배지는 일반적으로 수치화가 가능한 항목의 레이블을 표시할 때 사용합니다.
보통 숫자를 표시하여 사용하지만 +, -, . 같은 특수문자를 표시할 수도 있습니다.
Variants
숫자 표시형 with icon
숫자를 표시하는 경우에는 최대 두 자릿수 까지 표시하고 넘어서는 경우에는 +로 표시합니다.
숫자 표시형 with text label
텍스트 레이블 옆에 표시하는 경우에는 툴팁과 함께 패턴화하여 사용할 수 있습니다.
도트 표시형 with icon
사용자 알림 등 상태를 알리는 용도로 사용할 때는 컬러 도트를 사용합니다.
Guidelines
배지는 하나의 아이템이나 레이블과 사용하는 것을 원칙으로 합니다.
•
사용자의 이해를 돕기 위해 필요한 경우 tooltip을 함께 사용합니다.
•
해당 항목을 시각화한 아이콘과 함께 사용하는 것을 권장합니다.
•
명확하게 표시를 인지할 수 있도록 시각적으로 강조할 수 있는 스타일을 지정하여 사용합니다.
Accessibility
배지 텍스트는 색상에 의존하지 않고도 의미전달이 가능하도록 명확해야 합니다.
•
모든 배지에는 스크린 리더를 위한 대체 텍스트를 적용합니다.
•
상태 배지의 경우에는 각 상태별로 대체 텍스트를 적용하고 아이콘과 함께 사용합니다.
