Badge

@hua-labs/ui

v1.1.0

레이블, 카테고리 또는 상태를 표시하는 작은 상태 표시 컴포넌트. React.memo로 최적화됨.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Badge } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

변형

Default

Secondary

Destructive

Error

Outline

Glass

상태 예시

완료

대기 중

실패

초안

사용 사례

제품 라벨

Premium Plan

Pro

알림 카운트

메시지

알림

99+

Glass 변형 (배경 위에서)

글래스 효과

Props

이름	타입	기본값	설명
`variant`	`"default" \| "secondary" \| "destructive" \| "error" \| "outline" \| "glass"`	`"default"`	뱃지의 시각적 스타일
`children*`	`React.ReactNode`	-	뱃지 내용

코드 예시

기본 사용법tsx

1import { Badge } from '@hua-labs/ui';
2 
3<Badge>Default</Badge>
4<Badge variant="secondary">Secondary</Badge>
5<Badge variant="destructive">Destructive</Badge>
6<Badge variant="outline">Outline</Badge>

상태 예시tsx

1// Status badges
2<Badge variant="default">Active</Badge>
3<Badge variant="secondary">Pending</Badge>
4<Badge variant="destructive">Failed</Badge>
5<Badge variant="outline">Draft</Badge>

아이콘과 함께tsx

1<Badge className="gap-1">
2  <CheckCircle className="h-3 w-3" />
3  Completed
4</Badge>

성능 최적화

Badge는 React.memo로 래핑되어 있어 props가 변경되지 않으면 리렌더링되지 않습니다. variantClasses도 useMemo로 메모이제이션됩니다.

접근성

•상태 표시용으로 사용, 인터랙티브 요소로 사용 X: 인라인 요소로 렌더링, 기본적으로 인터랙티브하지 않음
•포커스 가능 시 키보드 탐색용 포커스 링 있음: 비인터랙티브 뱃지에는 포커스 링 불필요
•모든 변형이 WCAG AA 대비 요구 사항 충족: 모든 변형이 WCAG AA 대비 요구 사항 충족

Input Avatar