Badge

짧은 상태나 범주 메타데이터를 비대화식으로 표시하는 compact label입니다.

예제

승인됨 확인 필요

사용해야 할 때

주문의 진행 상태, 짧은 범주, 새 항목 표시처럼 본문을 보조하는 compact metadata에 사용합니다.

사용하지 말아야 할 때

버튼, 토글, 링크처럼 interaction이 필요한 요소로 사용하지 않습니다. 긴 문장이나 tone만으로 이해해야 하는 상태에도 사용하지 않습니다.

구조

native span 안에 한 줄 label을 둡니다. Badge는 icon slot, close action, notification live region을 포함하지 않습니다.

크기와 변형

small은 20px, medium은 24px 높이입니다. soft와 solid, neutral, primary, success, danger를 조합해 총 16개 시각 조합을 만듭니다.

상태와 동작

Badge는 비대화식이므로 hover, focus, pressed, disabled 상태가 없습니다. 정보가 바뀌었다는 공지는 Badge가 아니라 surrounding live region이 책임집니다.

반응형 동작

모바일과 데스크톱에서 동일한 크기를 유지합니다. label은 한 줄이어야 하며 좁은 화면에서는 surrounding layout이 Badge를 다음 줄로 배치합니다.

접근성

visible children이 읽히며 기본 role을 만들지 않습니다. success/danger 색상만으로 의미를 전달하지 말고 승인됨, 실패처럼 의미가 드러나는 label을 사용합니다.

React 예제

import { Badge } from '@maxxuxx/react';
import '@maxxuxx/react/styles.css';

export function OrderStatus() {
  return <Badge tone="success" variant="soft">결제 완료</Badge>;
}

API

사용 토큰

• size/badge/small, size/badge/medium, radius/full
• color/status/* semantic status colors
• color/action/primary, color/action/weak, color/action/on-primary, color/action/on-weak

Figma

Badge component set은 Size 2 × Variant 2 × Tone 4 = 16 variants와 Label TEXT property를 제공합니다. 크기, 간격, radius, typography, 배경, label 색상은 대응하는 design token variable에 연결되어 있습니다.

지원 상태