Components
Button
버튼 컴포넌트는 사용자 인터랙션을 위한 클릭 가능한 요소입니다.
기본 사용법
import { Button } from '@aift/ui/Button';export default function Preview() { return <Button>버튼</Button>;}Variants
버튼의 스타일 변형을 설정할 수 있습니다.
import { Button } from '@aift/ui/Button';export default function Contained() { return ( <div className="flex flex-wrap gap-2"> <Button variant="surface" color="primary">Surface</Button> <Button variant="outlined" color="primary">Outlined</Button> <Button variant="default-outline" color="primary">Default Outline</Button> <Button variant="default-surface" color="primary">Default Surface</Button> </div> );}Sizes
버튼의 크기를 결정합니다.
import { Button } from '@aift/ui/Button';export default function Sizes() { return ( <div className="flex flex-wrap items-center gap-2"> <Button size="xsmall">XSmall</Button> <Button size="small">Small</Button> <Button size="medium">Medium</Button> <Button size="large">Large</Button> <Button size="xlarge">XLarge</Button> </div> );}Variant별 Sizes
각 variant별로 모든 사이즈를 확인할 수 있습니다.
Surface
Outlined
Default Outline
Default Surface
'use client';import { Button } from '@aift/ui/Button';export default function VariantsSizes() { return ( <div className="space-y-6"> <div> <h3 className="text-sm font-medium mb-3">Surface</h3> <div className="flex flex-wrap items-center gap-2"> <Button variant="surface" color="primary" size="xsmall"> XSmall </Button> <Button variant="surface" color="primary" size="small"> Small </Button> <Button variant="surface" color="primary" size="medium"> Medium </Button> <Button variant="surface" color="primary" size="large"> Large </Button> <Button variant="surface" color="primary" size="xlarge"> XLarge </Button> </div> </div> <div> <h3 className="text-sm font-medium mb-3">Outlined</h3> <div className="flex flex-wrap items-center gap-2"> <Button variant="outlined" color="primary" size="xsmall"> XSmall </Button> <Button variant="outlined" color="primary" size="small"> Small </Button> <Button variant="outlined" color="primary" size="medium"> Medium </Button> <Button variant="outlined" color="primary" size="large"> Large </Button> <Button variant="outlined" color="primary" size="xlarge"> XLarge </Button> </div> </div> <div> <h3 className="text-sm font-medium mb-3">Default Outline</h3> <div className="flex flex-wrap items-center gap-2"> <Button variant="default-outline" color="primary" size="xsmall"> XSmall </Button> <Button variant="default-outline" color="primary" size="small"> Small </Button> <Button variant="default-outline" color="primary" size="medium"> Medium </Button> <Button variant="default-outline" color="primary" size="large"> Large </Button> <Button variant="default-outline" color="primary" size="xlarge"> XLarge </Button> </div> </div> <div> <h3 className="text-sm font-medium mb-3">Default Surface</h3> <div className="flex flex-wrap items-center gap-2"> <Button variant="default-surface" color="primary" size="xsmall"> XSmall </Button> <Button variant="default-surface" color="primary" size="small"> Small </Button> <Button variant="default-surface" color="primary" size="medium"> Medium </Button> <Button variant="default-surface" color="primary" size="large"> Large </Button> <Button variant="default-surface" color="primary" size="xlarge"> XLarge </Button> </div> </div> </div> );}Colors
버튼의 색상을 설정할 수 있습니다. surface와 outlined variant는 color prop에 따라 색상이 변경됩니다.
Surface
Outlined
Text
'use client';import { Button } from '@aift/ui/Button';export default function Colors() { return ( <div className="space-y-6"> <div> <h3 className="text-sm font-medium mb-3">Surface</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="default"> Default </Button> <Button variant="surface" color="primary"> Primary </Button> <Button variant="surface" color="positive"> Positive </Button> <Button variant="surface" color="cautionary"> Cautionary </Button> <Button variant="surface" color="destructive"> Destructive </Button> <Button variant="surface" color="info"> Info </Button> </div> </div> <div> <h3 className="text-sm font-medium mb-3">Outlined</h3> <div className="flex flex-wrap gap-2"> <Button variant="outlined" color="default"> Default </Button> <Button variant="outlined" color="primary"> Primary </Button> <Button variant="outlined" color="positive"> Positive </Button> <Button variant="outlined" color="cautionary"> Cautionary </Button> <Button variant="outlined" color="destructive"> Destructive </Button> <Button variant="outlined" color="info"> Info </Button> </div> </div> <div> <h3 className="text-sm font-medium mb-3">Text</h3> <div className="flex flex-wrap gap-2"> <Button variant="text" color="default"> Default </Button> <Button variant="text" color="primary"> Primary </Button> <Button variant="text" color="positive"> Positive </Button> <Button variant="text" color="cautionary"> Cautionary </Button> <Button variant="text" color="destructive"> Destructive </Button> <Button variant="text" color="info"> Info </Button> </div> </div> </div> );}Default Variants
default-outline과 default-surface는 color prop과 무관하게 항상 동일한 스타일을 유지합니다.
Default Outline
기본 outline 스타일을 유지하며, color prop이 적용되지 않습니다.
import { Button } from '@aift/ui/Button';export default function DefaultOutline() { return ( <div className="flex flex-wrap gap-2"> <Button variant="default-outline" color="primary"> Default Outline </Button> </div> );}Default Surface
회색 배경의 surface 스타일을 유지하며, color prop이 적용되지 않습니다.
import { Button } from '@aift/ui/Button';export default function DefaultSurface() { return ( <div className="flex flex-wrap gap-2"> <Button variant="default-surface" color="primary"> Default Surface </Button> </div> );}Disabled 상태
Default
Primary
Positive
Cautionary
Destructive
Info
import { Button } from '@aift/ui/Button';export default function Disabled() { return ( <div className="space-y-6"> <h3 className="text-sm font-medium mb-3">Default</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="default" disabled> Surface </Button> <Button variant="outlined" color="default" disabled> Outlined </Button> </div> <h3 className="text-sm font-medium mb-3">Primary</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="primary" disabled> Surface </Button> <Button variant="outlined" color="primary" disabled> Outlined </Button> </div> <h3 className="text-sm font-medium mb-3">Positive</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="positive" disabled> Surface </Button> <Button variant="outlined" color="positive" disabled> Outlined </Button> </div> <h3 className="text-sm font-medium mb-3">Cautionary</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="cautionary" disabled> Surface </Button> <Button variant="outlined" color="cautionary" disabled> Outlined </Button> </div> <h3 className="text-sm font-medium mb-3">Destructive</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="destructive" disabled> Surface </Button> <Button variant="outlined" color="destructive" disabled> Outlined </Button> </div> <h3 className="text-sm font-medium mb-3">Info</h3> <div className="flex flex-wrap gap-2"> <Button variant="surface" color="info" disabled> Surface </Button> <Button variant="outlined" color="info" disabled> Outlined </Button> </div> </div> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'surface' | 'outlined' | 'default-outline' | 'default-surface' | 'default-surface' | 버튼의 스타일 |
| size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' | 'icon' | 'medium' | 버튼의 크기 |
| color | 'default' | 'primary' | 'positive' | 'cautionary' | 'destructive' | 'info' | 'black' | 'white' | 'default' | 버튼의 색상 |
| radius | 'none' | 'small' | 'medium' | 'large' | 'extra' | 'full' | 'medium' | 버튼의 모서리 둥글기 |
| disabled | boolean | false | 비활성화 여부 |
| asChild | boolean | false | 자식 요소를 버튼으로 사용 |
| loading | boolean | false | 로딩 상태 |
| startIcon | React.ReactNode | - | 시작 아이콘 |
| endIcon | React.ReactNode | - | 끝 아이콘 |