Button

버튼 컴포넌트는 사용자 인터랙션을 위한 클릭 가능한 요소입니다.

기본 사용법

import { Button } from '@aift/ui/Button';

export default function Preview() {
  return <Button>버튼</Button>;
}

import { Button } from '@aift/ui/Button';export default function Preview() {  return <Button>버튼</Button>;}

Variant와 Color 조합

Contained

import { Button } from '@aift/ui/Button';

export default function Contained() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="contained" color="default">Default</Button>
      <Button variant="contained" color="primary">Primary</Button>
      <Button variant="contained" color="positive">Positive</Button>
      <Button variant="contained" color="cautionary">Cautionary</Button>
      <Button variant="contained" color="destructive">Destructive</Button>
      <Button variant="contained" color="info">Info</Button>
    </div>
  );
}

import { Button } from '@aift/ui/Button';export default function Contained() {  return (    <div className="flex flex-wrap gap-2">      <Button variant="contained" color="default">Default</Button>      <Button variant="contained" color="primary">Primary</Button>      <Button variant="contained" color="positive">Positive</Button>      <Button variant="contained" color="cautionary">Cautionary</Button>      <Button variant="contained" color="destructive">Destructive</Button>      <Button variant="contained" color="info">Info</Button>    </div>  );}

Outlined

import { Button } from '@aift/ui/Button';

export default function Outlined() {
  return (
    <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>
  );
}

import { Button } from '@aift/ui/Button';export default function Outlined() {  return (    <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>  );}

Text

import { Button } from '@aift/ui/Button';

export default function Text() {
  return (
    <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>
      <Button variant="text" color="black">Black</Button>
      <div className="w-full bg-neutral-80 p-2 rounded">
        <Button variant="text" color="white">White</Button>
      </div>
    </div>
  );
}

import { Button } from '@aift/ui/Button';export default function Text() {  return (    <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>      <Button variant="text" color="black">Black</Button>      <div className="w-full bg-neutral-80 p-2 rounded">        <Button variant="text" color="white">White</Button>      </div>    </div>  );}

Surface

import { Button } from '@aift/ui/Button';

export default function Surface() {
  return (
    <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>
  );
}

import { Button } from '@aift/ui/Button';export default function Surface() {  return (    <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>  );}

Sizes

버튼의 크기를 결정합니다.

import { Button } from '@aift/ui/Button';

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>
      <Button size="extra">Extra</Button>
    </div>
  );
}

import { Button } from '@aift/ui/Button';export default function Sizes() {  return (    <div className="flex flex-wrap items-center gap-2">      <Button size="small">Small</Button>      <Button size="medium">Medium</Button>      <Button size="large">Large</Button>      <Button size="extra">Extra</Button>    </div>  );}

Disabled 상태

import { Button } from '@aift/ui/Button';

export default function Disabled() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="contained" color="primary" disabled>Disabled</Button>
      <Button variant="outlined" color="primary" disabled>Disabled</Button>
      <Button variant="text" color="primary" disabled>Disabled</Button>
      <Button variant="surface" color="primary" disabled>Disabled</Button>
    </div>
  );
}

import { Button } from '@aift/ui/Button';export default function Disabled() {  return (    <div className="flex flex-wrap gap-2">      <Button variant="contained" color="primary" disabled>Disabled</Button>      <Button variant="outlined" color="primary" disabled>Disabled</Button>      <Button variant="text" color="primary" disabled>Disabled</Button>      <Button variant="surface" color="primary" disabled>Disabled</Button>    </div>  );}

Props

Prop	Type	Default	Description
variant	`'contained' \| 'outlined' \| 'text' \| 'surface' \| 'icon'`	`'outlined'`	버튼의 스타일
size	`'small' \| 'medium' \| 'large' \| '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`	-	끝 아이콘

Button

On this page