Badge

Badge (배지)

배지는 연결된 컴포넌트의 상태나 설명을 알려 주는 시각적 표시자예요. 짧은 텍스트, 색, 아이콘을 사용해 빠르게 알아볼 수 있게 하며, 관련 콘텐츠 근처에 배치해요.

출처: 문서

본문

배지는 연결된 컴포넌트의 상태나 설명을 전달하는 시각적 표시자예요. 짧은 텍스트, 색, 아이콘으로 빠르게 알아볼 수 있게 하고, 관련 콘텐츠 근처에 배치해요.

Behavior (동작)

배지는 내장된 최대 너비(max-width)가 없어서 계속 커져요. 줄임표(truncation)를 넣어야 한다면 최대 너비와 줄임 스타일을 직접 추가해야 해요.

Layout (레이아웃)

배치(Placement)

배지는 설명하는 컴포넌트 위나 근처에 두어야 해요. 사람들이 배지와 연결된 컴포넌트 사이를 직관적으로 연결 지을 수 있을 만큼 가까이 배치하세요. 예를 들어 온라인 상태 배지는 아바타 컴포넌트 위에 겹치거나 살짝 비켜서 놓을 수 있어요.

색(Color)

레이아웃 안에서 배지 색을 의도적으로 사용해서 가장 중요한 영역에 시선을 모으세요. 배지에 경고(warning)나 위험(danger) 색을 써야 한다면, 가능하면 문제를 해결할 수 있는 방법을 함께 제공해 주세요. 특히 의미론적 색(semantic color)은 다음에 무엇을 해야 하는지 보여주는 데 사용해요.

크기(Size)

같은 맥락 안에서 배지 크기를 섞어 쓰지 마세요.

Accessibility (접근성)

포커스(Focus)

기본적으로 배지는 포커스를 받지 않아요. 배지에 상호작용을 넣는다면, 예를 들어 더 많은 맥락을 위한 툴팁을 포함한다면, 포커스도 함께 구성해 주세요. 툴팁은 레이아웃을 어지럽히지 않고 추가 정보를 드러내는 데 도움이 돼요.

ARIA 라벨(Aria labeling)

배지가 아이콘만으로 되어 있다면 그 정보는 aria-label로 전달되어야 해요. 배지가 다른 컴포넌트에 연결되어 있다면 그 컴포넌트의 aria-label이 배지의 정보를 전달해야 해요.

Content (콘텐츠)

텍스트가 있는 배지는 짧고 설명적으로 써야 해요. 상태를 묘사하는 한두 단어를 목표로 하세요. 너무 많이 넣으려 하지 마세요.

문장식 대문자 규칙(sentence-style capitalization)을 사용해서 첫 단어의 첫 글자만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization 항목을 참고하세요.

상태나 상태를 묘사하는 단어를 사용하세요. 화면에서 잘려 나갈(truncate) 라벨은 피하세요.