Components
Badge
배지 컴포넌트
Badge
배지 컴포넌트는 상태나 카테고리를 표시하는 작은 라벨입니다.
기본 사용법
Badge
import Badge from '@aift/ui/Badge';export default function Preview() { return ( <div className="flex gap-2"> <Badge>Badge</Badge> </div> );}Variants
배지의 스타일을 결정합니다.
Solid
Soft
Surface
Outline
import Badge from '@aift/ui/Badge';export default function Variants() { return ( <div className="flex flex-wrap gap-2"> <Badge variant="solid" color="gray"> Solid </Badge> <Badge variant="soft" color="indigo"> Soft </Badge> <Badge variant="surface" color="cyan"> Surface </Badge> <Badge variant="outline" color="orange"> Outline </Badge> </div> );}Sizes
배지의 크기를 결정합니다.
Size 1
Size 2
Size 3
import Badge from '@aift/ui/Badge';export default function Sizes() { return ( <div className="flex flex-wrap items-center gap-2"> <Badge size="1">Size 1</Badge> <Badge size="2">Size 2</Badge> <Badge size="3">Size 3</Badge> </div> );}Colors
배지의 색상을 결정합니다.
Gray
Indigo
Cyan
Orange
Crimson
import Badge from '@aift/ui/Badge';export default function Colors() { return ( <div className="flex flex-wrap gap-2"> <Badge variant="solid" color="gray"> Gray </Badge> <Badge variant="solid" color="indigo"> Indigo </Badge> <Badge variant="solid" color="cyan"> Cyan </Badge> <Badge variant="solid" color="orange"> Orange </Badge> <Badge variant="solid" color="crimson"> Crimson </Badge> </div> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'soft' | 'surface' | 'outline' | 'surface' | 배지의 스타일 |
| size | '1' | '2' | '3' | '1' | 배지의 크기 |
| badgeColor | 'gray' | 'indigo' | 'cyan' | 'orange' | 'crimson' | - | 배지의 색상 |
| radius | 'none' | 'small' | 'medium' | 'large' | 'full' | 'full' | 배지의 모서리 둥글기 |
| highContrast | boolean | false | 고대비 모드 |