SEED Design
Components

Badge

Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

개요

옵션 테이블

속성기본값
sizemedium, largemedium
variantweak, solid, outlineweak
toneneutral, brand, informative, positive, warning, criticalneutral

스펙

size=large

상태슬롯속성
enabledrootmaxWidth
minHeight
paddingX
paddingY
cornerRadius
labelfontSize
lineHeight

size=medium

상태슬롯속성
enabledrootmaxWidth
minHeight
paddingX
paddingY
cornerRadius
labelfontSize
lineHeight

variant=weak

상태슬롯속성
enabledlabelfontWeight

variant=solid

상태슬롯속성
enabledlabelfontWeight

variant=outline

상태슬롯속성
enabledrootstrokeWidth
labelfontWeight

tone=neutral, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=neutral, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=neutral, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

tone=brand, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=brand, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=brand, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

tone=informative, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=informative, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=informative, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

tone=positive, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=positive, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=positive, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

tone=warning, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=warning, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=warning, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

tone=critical, variant=weak

상태슬롯속성
enabledrootcolor
labelcolor

tone=critical, variant=solid

상태슬롯속성
enabledrootcolor
labelcolor

tone=critical, variant=outline

상태슬롯속성
enabledrootstrokeColor
labelcolor

Last updated on