디자인시스템

이 누리집은 대한민국 공식 전자정부 누리집입니다.

대한적십자사 홈페이지

배지

컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다. 컴포넌트의 분류 체계, 구조화된 정보, 상태 정보, 기타 메타 데이터를 표시할 수 있으며 사용자의 주의를 끌기 위해 색상을 활용할 수 있다.

컴포넌트명

배지 (Badge)

1.레이블
배지를 통해 전달하고자 하는 메타 데이터
2.컨테이너
배지를 배경과 구분하는 배경색 또는 윤곽선

유형

Badge_dot

Type중요한 정보나 상태 변경사항 또는 새로운 정보를 강조할때 사용한다.

Primary

Label

New

Label

코드 보기

유형

Badge_number

Type중요한 정보나 상태 변경사항 또는 새로운 정보를 강조할때 사용한다.

Primary

5 +999

New

5 +999

코드 보기

유형

Badge

Color정보의 우선순위 또는 사용처에 따라 사용한다.

Primary

Label

Secondary

Label

Tertiary

Label

Info

Label

Disabled

Label

코드 보기

Type정보의 우선순위 또는 사용처에 따라 사용한다.

Solid

Label

Solid-pastel

Label

Outline

Label

가이드

레이블은 정확한 내용으로 간결하게 제공한다. 사용자가 배지를 통해 정보를 빠르게 파악할 수 있도록 핵심 정보를 간결하게 요약하고 텍스트에 줄바꿈이 발생하지 않도록 해야 한다.
하나의 요소에 한 개의 배지를 사용한다. 배지는 사용자가 빠르게 정보를 훑어 보는 과정을 돕기 위해 사용된다. 만약 한 항목에 여러 개의 배지가 사용된다면 지나치게 많은 정보가 강조되어 있어 배지의 사용 효과를 감소시킨다. 배지는 데이터와 관련된 가장 중요한 특성을 표현하는 데 한 번만 사용하는 것이 적절하다.