Badge

Anatomy

• root
• label

Options

Size

Medium (기본)

일반적인 상황에서 사용되는 기본 크기입니다.

Large

더 큰 강조가 필요할 때 사용하는 크기입니다.

Variant

Badge의 외형을 결정하는 스타일 옵션입니다.

Weak

약한 시각적 강조를 제공하는 스타일입니다. 배경색이 연하고 텍스트는 중간 강조로 표시됩니다.

Solid

강한 시각적 강조를 제공하는 스타일입니다. 진한 배경색과 굵은 텍스트로 표시됩니다.

Outline

외곽선으로 구분되는 스타일입니다. 배경 없이 테두리와 굵은 텍스트로 표시됩니다.

Tone

Badge의 역할에 따른 색상을 결정하는 옵션입니다.

Neutral

중립적인 정보를 나타내는 색상입니다. 중요도가 높지 않은 정보를 표현할 때 사용합니다.

Brand

브랜드 관련 정보나 상태를 나타내는 색상입니다. 서비스 브랜드의 아이덴티티를 표현할 때 사용합니다.

Informative

정보 제공의 의미를 가진 색상입니다. 활성 상태, 사용 중, 게시됨 등의 상태를 표현할 때 적합합니다.

Positive

긍정적인 상태를 나타내는 색상입니다. 승인됨, 완료, 성공, 새로운 기능 등을 표현할 때 적합합니다.

Critical

경고나 오류와 같은 중요한 상태를 나타내는 색상입니다. 거부됨, 실패, 오류 상태 등을 표현할 때 적합합니다.

Label

Badge에 표시되는 텍스트 내용입니다. 사용자에게 필요한 정보를 간결하게 전달해야 합니다.

Behaviors

Text Overflow

[TODO: 텍스트가 줄바꿈된 badge 예시]

텍스트가 영역에 비해 길면 다음 줄로 줄바꿈됩니다. 가능한 한 줄바꿈을 피하고 짧은 텍스트를 사용하는 것이 좋습니다.

Usage Guidelines

간결한 텍스트 사용하기

Badge 레이블은 정확한 내용으로 간결하게 제공해야 합니다. 한국어 기준 1-2단어, 최대 8자 이내가 적절합니다.

의미에 맞는 Tone 사용하기

Badge의 tone은 전달하고자 하는 의미와 일치해야 합니다. 예를 들어, 오류 상태에는 critical tone을, 긍정적 상태에는 positive tone을 사용합니다.

Brand Tone 사용 주의하기

브랜드 톤의 배지는 쉽게 버튼과 혼동될 수 있습니다. 꼭 필요한 경우에만 브랜드 톤 배지를 사용하세요.

문장 형식 통일하기

[TODO: 일관된 문법 구조로 표현된 badge 세트 예시]

같은 집합의 Badge들은 문법적 구조를 일관되게 유지해야 합니다. 예를 들어, 상태를 나타내는 Badge 세트라면 모두 형용사 형태로 표현하는 것이 좋습니다.

색상에만 의존하지 않기

Badge의 의미 전달이 색상에만 의존하지 않도록 하세요. 텍스트만으로도 의미가 명확하게 전달되어야 합니다.

배지를 인터랙티브 요소로 사용하지 않음

배지를 인터랙티브 요소로 마크업(<a>, <button> 등) 또는 역할(role=link, role=button 등)을 부여하거나 부적절한 속성(0 이상의 속성값을 가진 tabindex 속성)을 적용하여 키보드 사용자, 스크린 리더 사용자가 배지의 용도와 목적을 혼동하지 않도록 해야 합니다.

개요

옵션 테이블

링크

스펙

size=large

상태	슬롯	속성	값
enabled	root	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	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
	label	color	$color.fg.neutral-muted

tone=brand, variant=weak

상태	슬롯	속성	값
enabled	root	color	$color.palette.carrot-100
	label	color	$color.palette.carrot-900

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
	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
	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
	label	color	$color.fg.positive

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
	label	color	$color.fg.critical