Contents

Badge

짧은 메타 정보 표시 라벨.

상태(NEW, Online), 카운트, 분류 등. 인터랙션 없는 정적 라벨. 액션이 있다면 Button 또는 Tag(추후) 사용.

import { Badge } from "@nxtgen-org/react";

Variants

7 variants

neutralbrandsuccesswarningdangerinfogradient

tsx

1<Badge variant="neutral">neutral</Badge>
2<Badge variant="brand">brand</Badge>
3<Badge variant="success">success</Badge>
4<Badge variant="warning">warning</Badge>
5<Badge variant="danger">danger</Badge>
6<Badge variant="info">info</Badge>
7<Badge variant="gradient">gradient</Badge>

Sizes

sm / md / lg

smmdlg

tsx

1<Badge size="sm" variant="brand">sm</Badge>
2<Badge size="md" variant="brand">md</Badge>
3<Badge size="lg" variant="brand">lg</Badge>

With icon

아이콘 결합

AI Powered

tsx

1<Badge variant="gradient">
2  <Sparkles size={12} /> AI Powered
3</Badge>

API

Name	Type	Default	Description
variant	"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info" \| "gradient"	"neutral"	—
size	"sm" \| "md" \| "lg"	"md"	—
...props	HTMLAttributes<HTMLSpanElement>	—	—