<aside> 📍 How to use Badges

• 정의된 스타일을 적절한 상황에 사용해야 하며, 정의되지 않은 새로운 스타일은 재사용성이 높을 경우에만 담당자와 논의하여 가이드에 추가하여 관리합니다. </aside>

Badges

정보를 강조하거나 주의를 끌기 위해 사용하며 해당 요소와 관련된 알림, 항목 수 또는 기타 정보를 나타냅니다. 기본 뱃지의 경우, 1~10의 자리와 100의자리 이후의 숫자 값에 따른 스타일이 다릅니다.

• 1~10의 자리
  • 숫자 위치 : 20X20px의 원형 뱃지 중앙에 위치
  • 뱃지 위치 : 상단, 우측 8px의 마진
• 100의자리 숫자 이상
  • 숫자 위치 : 좌우 4px의 패딩을 가진 24X20px의 뱃지 중앙에 위치하며 “99” 이후로 부터 “+” 기호를 붙여 표기
  • 뱃지 위치 : 상단 8px, 우측 10px의 마진

• 추후 도입 제안

목차