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