Badge

Anatomy

Properties

Size

Badge는 Large, Medium 두 가지 사이즈로 제공됩니다.

Tone

Neutral, Brand, Informative, Positive, Warning, Critical 여섯 가지 색상으로 구성되어 있으며, 전달하고자 하는 의미와 맥락에 맞게 사용할 수 있습니다.

Variant

시각적인 주목도에 따라 선택하여 사용할 수 있도록 Outline, Weak, Solid 세 가지 Variant를 제공합니다.

Guidelines

적절한 스타일 사용하기

Badge는 Solid, Outline, Weak 세 가지 스타일을 제공합니다. 각 스타일은 강조도와 시각적 무게감이 다르므로 상황에 맞게 선택하는 것이 중요합니다.

배경색이 있는 경우에는 Weak 스타일 사용을 권장하지 않습니다.

Brand 컬러는 꼭 필요한 곳에만 사용하기

Brand 컬러는 브랜드의 정체성과 가치를 전달하는 중요 자산으로, 로고, 대표 버튼, 핵심 메시지 등 브랜드 상징 요소에 집중 사용해야 합니다.

Badge는 부가 정보 전달용 보조 요소로, 브랜드 컬러를 과다 사용하면 의미와 강조도가 분산됩니다. '이웃 간의 연결' 의미를 전달하는 곳에 사용하세요.

Badge의 활용

카테고리 표시

Badge는 콘텐츠를 그룹화하거나 분류하는 카테고리 태그로 활용할 수 있습니다. 이때는 Weak 스타일을 사용을 권장합니다.

부가 정보 및 혜택 전달

Badge는 주요 정보뿐만 아니라 사용자에게 유용한 부가 정보를 전달하는 데 활용할 수 있습니다. 이러한 경우, 사용자의 시선을 끌면서도 주요 콘텐츠를 방해하지 않도록 Weak 스타일을 적용합니다.

상태 표시

Badge를 활용하면 항목의 현재 상태를 간결하게 표현할 수 있습니다. 사용자가 상태를 직관적으로 파악할 수 있도록 각 상태에 맞는 적절한 컬러를 사용해주세요.

너무 많은 Badge를 나열하지 않기

Badge는 정보 전달에 효과적이지만, 한 화면이나 요소에 너무 많은 Badge를 나열하면 오히려 시각적 혼란을 줄 수 있습니다.

중요한 정보만 골라 최소화하고, 하나의 객체에는 1~2개 이하의 Badge만 사용하는 것이 권장됩니다.

너무 긴 라벨을 사용하지 않기

Badge는 짧고 명확한 정보를 전달하는 데 최적화된 UI 요소입니다. 라벨이 너무 길어지면 컴포넌트의 형태가 깨지거나 레이아웃을 해칠 수 있으며, 읽기에도 불편합니다. 가능하면 2~3단어 이내로 간결하게 작성하고, 필요시 말줄임 사용을 고려하세요.

max-width가 설정되어 있어 10글자 이상이면 말줄임 처리됩니다. 글자를 전부 표시해야 한다면 따로 구현이 필요하므로 엔지니어와 논의해주세요.

버튼처럼 클릭 가능한 요소로 사용하지 않기

Badge는 정적인 정보 전달에 적합한 컴포넌트이며, 사용자의 클릭을 유도하는 행동 요소(CTA)로 사용하는 것은 권장하지 않습니다.

액션이 필요한 경우엔 Chip, Toggle Button, 또는 Action Button 컴포넌트를 사용해주세요.

Badge V3 변경점

• 잘 사용되지 않는 Pill 타입을 제거했습니다.
• Warning Tone을 새롭게 추가했습니다.

Specification

size=large

상태	슬롯	속성	값
enabled	root	maxWidth	108px (6.75rem)
		minHeight	$dimension.x6
		paddingX	$dimension.x2
		paddingY	$dimension.x1
		cornerRadius	$radius.r1_5
	label	fontSize	$font-size.t2
		lineHeight	$line-height.t2

size=medium

상태	슬롯	속성	값
enabled	root	maxWidth	120px (7.5rem)
		minHeight	$dimension.x5
		paddingX	$dimension.x1_5
		paddingY	$dimension.x0_5
		cornerRadius	$radius.r1
	label	fontSize	$font-size.t1
		lineHeight	$line-height.t1

variant=weak

상태	슬롯	속성	값
enabled	label	fontWeight	$font-weight.medium

variant=solid

상태	슬롯	속성	값
enabled	label	fontWeight	$font-weight.bold

variant=outline

상태	슬롯	속성	값
enabled	root	strokeWidth	1px
	label	fontWeight	$font-weight.bold

tone=neutral, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral-muted

tone=neutral, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.palette.gray-800
	label	color	$color.fg.neutral-inverted

tone=neutral, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.neutral-muted
	label	color	$color.fg.neutral-muted

tone=brand, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.brand-weak
	label	color	$color.fg.brand-contrast

tone=brand, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.brand-solid
	label	color	$color.palette.static-white

tone=brand, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.brand-weak
	label	color	$color.fg.brand

tone=informative, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.informative-weak
	label	color	$color.fg.informative-contrast

tone=informative, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.informative-solid
	label	color	$color.palette.static-white

tone=informative, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.informative-weak
	label	color	$color.fg.informative

tone=positive, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.positive-weak
	label	color	$color.fg.positive-contrast

tone=positive, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.positive-solid
	label	color	$color.palette.static-white

tone=positive, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.positive-weak
	label	color	$color.fg.positive

tone=warning, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-weak
	label	color	$color.fg.warning-contrast

tone=warning, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-solid
	label	color	$color.palette.static-black-alpha-900

tone=warning, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.warning-weak
	label	color	$color.fg.warning

tone=critical, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-weak
	label	color	$color.fg.critical-contrast

tone=critical, variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-solid
	label	color	$color.palette.static-white

tone=critical, variant=outline

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.critical-weak
	label	color	$color.fg.critical