Content badge

아이콘과 텍스트를 조합하여 특정 정보의 상태나 속성을 시각적으로 강조하기 위한 요소입니다. 카드나 리스트 등에서 사용자가 관련 정보를 빠르게 알아볼 수 있도록 돕는 라벨 역할을 합니다.

Anatomy

  1. 1. Leading icon
  2. 2. Label
  3. 3. Trailing icon
  4. 4. Container

Variants

Label
Variants
Color
Leading icon
Trailing icon

Size

좌우 사이즈는 자유롭게 커스터마이징하여 사용할 수 있으나 높이는 고정하여 사용합니다.

Spacing

Badge를 여러 개 나열하는 경우 간격을 일정하게 사용합니다. Xsmall, Small 일 때 6px, Medium 일 때 8px 간격을 사용하는 것을 권장합니다.

Usage

Accent color

특정 요소의 상태, 속성, 혹은 분류를 시각적으로 강조하고 싶을 때 다양한 색상으로 활용할 수 있습니다. 사용자의 시선을 끌어 중요한 정보를 효과적으로 전달하는 데 사용합니다. 색상을 변경할 경우 Foreground color를 사용합니다.

Neutral color

특정 요소의 상태, 속성, 혹은 분류를 시각적으로 강조하지 않으면서 부가적인 정보를 제공하기 위해 사용합니다.

Color customize

Neutral, Accent, Status 컬러를 사용하여 부가 정보를 제공하거나 상태를 더욱 명확하게 표현합니다. Accent 컬러를 사용할 때 배경과 텍스트의 최소 명도 대비를 보장하기 위해 Accent/Foreground 색상을 사용합니다.

Hierarchy

Badge

Level.4 → 화면 내에서 가장 중요하고 주목도 높은 정보를 강조하여 전달합니다.

Badge

Level.3 → 주요 정보 다음으로 사용자의 주목을 끌 필요가 있는 긍정적이거나 중요한 상태를 나타냅니다.

Badge

Level.2 → 콘텐츠의 일반적인 상태나 분류 정보를 중립적으로 표시합니다.

Badge

Level.1 → 가장 낮은 우선순위의 부가 정보를 표시할 때 사용합니다.

How to use

Do

Badge로 콘텐츠의 부가 정보를 표시할 수 있습니다.

Do

작은 공간에 압축적으로 정보를 전달하기 위해 짧고 명확한 단어를 사용합니다.

Don’t

클릭 등 액션을 제공하지 않습니다. 액션으로 오해하지 않도록 Button, Chip과 구분하여 사용합니다.

Don’t

Border의 색상이나 둥글기를 임의로 변경하여 사용하지 않습니다.

Customize

Solid badge
contentColor
backgroundColor
Outlined badge
contentColor
backgroundColor
borderColor

© 2026 Wanted Lab, Inc.