Skip to Content
ComponentsCommunicationBadgeUsage

Badge Usage

다른 컴포넌트에 붙어 알림, 항목의 개수, 상태를 나타냅니다.

Layout

Sizing

Badge가 사용되는 맥락 컴포넌트 크기를 바탕으로 크기를 알맞게 적용하여 사용합니다.

1. 맥락 컴포넌트 사이즈가 medium, small, x-small 로 구성된 경우

Context Component SizeBadge Size
MediumMedium
Small / X-smallSmall
Badge Layout Sizing — medium, small, x-small 구성
Badge가 button, icon button에서 사용되는 예시

2. 맥락 컴포넌트 사이즈가 medium, small 로 구성된 경우

Context Component SizeBadge Size
MediumMedium
SmallSmall
Badge Layout Sizing — medium, small 구성
Badge가 tab에서 사용되는 예시

Placement

Badge는 단독으로 사용할 수 없으며, 다른 컴포넌트에 붙어 상태를 나타낼 수 있습니다.

✕Don'tRequired

Counter badge를 단독으로 수량 표시 목적으로 사용하지 않습니다.

✓DoRequired

다른 컴포넌트에 붙어 상태를 표시하는 용도로 사용합니다.

SpecsOverview