Badges

.badge.primary, .badge.secondary, .badge.outline

상태, 카테고리, 태그 등을 표시하기 위한 작은 레이블 컴포넌트입니다.

Badge Variants

세 가지 스타일 변형을 제공합니다.

Primary Secondary Outline

primary, secondary, outline 클래스로 스타일을 변경합니다.

<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge outline">Outline</span>

상태를 표시하기 위한 배지 사용 예제입니다.

활성 사용자가 현재 온라인 상태입니다.

대기중 승인 대기 중인 요청입니다.

완료 작업이 성공적으로 완료되었습니다.

오류 처리 중 오류가 발생했습니다.

카테고리나 태그를 표시하는 용도로 사용할 수 있습니다.

#디자인시스템 #UI컴포넌트 #프론트엔드

API 문서에서 타입을 표시하는 특수 배지입니다.

string number boolean Array<T> function

type-badge 클래스는 테이블 내에서 타입 정보를 표시합니다.

<span class="type-badge">string</span>
<span class="type-badge">boolean</span>

다양한 컨텍스트에서 배지 사용 예제입니다.