Components
Badge
배지 컴포넌트는 정보와 액션을 압축적으로 표시하는 컴팩트한 요소입니다.
기본 사용법
Badge
import Badge from '@aift/ui/Badge';export default function Preview() { return <Badge>Badge</Badge>;}Sizes
contained (default)
SmallMedium
outlined
SmallMedium
'use client';import Badge from '@aift/ui/Badge';export default function Sizes() { return ( <div className="flex flex-col gap-6"> <div> <p className="text-sm text-neutral-60 mb-2">contained (default)</p> <div className="flex flex-wrap gap-2"> <Badge size="small" variant="contained"> Small </Badge> <Badge size="medium" variant="contained"> Medium </Badge> </div> </div> <div> <p className="text-sm text-neutral-60 mb-2">outlined</p> <div className="flex flex-wrap gap-2"> <Badge size="small" variant="outlined"> Small </Badge> <Badge size="medium" variant="outlined"> Medium </Badge> </div> </div> </div> );}Colors
배지의 색상을 설정할 수 있습니다. color prop에 따라 색상이 변경됩니다.
contained (default)
PrimaryRedCoralYellowGreenPurpleBlueBrownFuchsiaNavyBlackWhite
outlined
PrimaryRedCoralYellowGreenPurpleBlueBrownFuchsiaNavyBlack
import Badge from '@aift/ui/Badge';export default function Colors() { return ( <div className="flex flex-col gap-6"> <div> <p className="text-sm text-neutral-60 mb-2">contained (default)</p> <div className="flex flex-wrap gap-2"> <Badge variant="contained" color="primary"> Primary </Badge> <Badge variant="contained" color="red"> Red </Badge> <Badge variant="contained" color="coral"> Coral </Badge> <Badge variant="contained" color="yellow"> Yellow </Badge> <Badge variant="contained" color="green"> Green </Badge> <Badge variant="contained" color="purple"> Purple </Badge> <Badge variant="contained" color="blue"> Blue </Badge> <Badge variant="contained" color="brown"> Brown </Badge> <Badge variant="contained" color="fuchsia"> Fuchsia </Badge> <Badge variant="contained" color="navy"> Navy </Badge> <Badge variant="contained" color="black"> Black </Badge> <Badge variant="contained" color="white"> White </Badge> </div> </div> <div> <p className="text-sm text-neutral-60 mb-2">outlined</p> <div className="flex flex-wrap gap-2"> <Badge variant="outlined" color="primary"> Primary </Badge> <Badge variant="outlined" color="red"> Red </Badge> <Badge variant="outlined" color="coral"> Coral </Badge> <Badge variant="outlined" color="yellow"> Yellow </Badge> <Badge variant="outlined" color="green"> Green </Badge> <Badge variant="outlined" color="purple"> Purple </Badge> <Badge variant="outlined" color="blue"> Blue </Badge> <Badge variant="outlined" color="brown"> Brown </Badge> <Badge variant="outlined" color="fuchsia"> Fuchsia </Badge> <Badge variant="outlined" color="navy"> Navy </Badge> <Badge variant="outlined" color="black"> Black </Badge> </div> </div> </div> );}