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>;}

Icon

startIcon, endIcon prop으로 버튼에 아이콘을 추가할 수 있습니다.

'use client';

import { Button } from '@aift/ui/Button';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

function PlusIcon() {
  return (
    <Icon name={COMMON_ICON_NAMES.PLUS} iconsMap={iconsMap} size={16} />
  );
}

function ArrowRightIcon() {
  return (
    <Icon
      name={COMMON_ICON_NAMES.ARROW_RIGHT}
      iconsMap={iconsMap}
      size={16}
    />
  );
}

export default function ButtonIcon() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="surface" color="primary">
        Button
      </Button>
      <Button variant="surface" color="primary" startIcon={<PlusIcon />}>
        Button
      </Button>
      <Button variant="surface" color="primary" endIcon={<ArrowRightIcon />}>
        Button
      </Button>
      <Button
        variant="surface"
        color="primary"
        startIcon={<PlusIcon />}
        endIcon={<ArrowRightIcon />}
      >
        Button
      </Button>
    </div>
  );
}

'use client';import { Button } from '@aift/ui/Button';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';function PlusIcon() {  return (    <Icon name={COMMON_ICON_NAMES.PLUS} iconsMap={iconsMap} size={16} />  );}function ArrowRightIcon() {  return (    <Icon      name={COMMON_ICON_NAMES.ARROW_RIGHT}      iconsMap={iconsMap}      size={16}    />  );}export default function ButtonIcon() {  return (    <div className="flex flex-wrap gap-2">      <Button variant="surface" color="primary">        Button      </Button>      <Button variant="surface" color="primary" startIcon={<PlusIcon />}>        Button      </Button>      <Button variant="surface" color="primary" endIcon={<ArrowRightIcon />}>        Button      </Button>      <Button        variant="surface"        color="primary"        startIcon={<PlusIcon />}        endIcon={<ArrowRightIcon />}      >        Button      </Button>    </div>  );}

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>
  );
}

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>
  );
}

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

Radius Full (Pill) - Surface

Radius Full (Pill) - Outlined

'use client';

import { Button } from '@aift/ui/Button';
import BlankOutline20Icon from '@aift/ui/Icons/BlankOutline20';

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"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="surface"
            color="primary"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="surface"
            color="primary"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="surface"
            color="primary"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="surface"
            color="primary"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            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"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="outlined"
            color="primary"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="outlined"
            color="primary"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="outlined"
            color="primary"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="outlined"
            color="primary"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            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"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="default-outline"
            color="primary"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="default-outline"
            color="primary"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="default-outline"
            color="primary"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="default-outline"
            color="primary"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            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"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="default-surface"
            color="primary"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="default-surface"
            color="primary"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="default-surface"
            color="primary"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="default-surface"
            color="primary"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-3">
          Radius Full (Pill) - Surface
        </h3>
        <div className="flex flex-wrap items-center gap-2">
          <Button
            variant="surface"
            color="primary"
            radius="full"
            size="xsmall"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="surface"
            color="primary"
            radius="full"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="surface"
            color="primary"
            radius="full"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="surface"
            color="primary"
            radius="full"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="surface"
            color="primary"
            radius="full"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XLarge
          </Button>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-3">
          Radius Full (Pill) - Outlined
        </h3>
        <div className="flex flex-wrap items-center gap-2">
          <Button
            variant="outlined"
            color="primary"
            radius="full"
            size="xsmall"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XSmall
          </Button>
          <Button
            variant="outlined"
            color="primary"
            radius="full"
            size="small"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Small
          </Button>
          <Button
            variant="outlined"
            color="primary"
            radius="full"
            size="medium"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Medium
          </Button>
          <Button
            variant="outlined"
            color="primary"
            radius="full"
            size="large"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            Large
          </Button>
          <Button
            variant="outlined"
            color="primary"
            radius="full"
            size="xlarge"
            startIcon={<BlankOutline20Icon />}
            endIcon={<BlankOutline20Icon />}
          >
            XLarge
          </Button>
        </div>
      </div>
    </div>
  );
}

'use client';import { Button } from '@aift/ui/Button';import BlankOutline20Icon from '@aift/ui/Icons/BlankOutline20';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"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="surface"            color="primary"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="surface"            color="primary"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="surface"            color="primary"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="surface"            color="primary"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            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"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="outlined"            color="primary"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="outlined"            color="primary"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="outlined"            color="primary"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="outlined"            color="primary"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            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"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="default-outline"            color="primary"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="default-outline"            color="primary"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="default-outline"            color="primary"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="default-outline"            color="primary"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            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"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="default-surface"            color="primary"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="default-surface"            color="primary"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="default-surface"            color="primary"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="default-surface"            color="primary"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XLarge          </Button>        </div>      </div>      <div>        <h3 className="text-sm font-medium mb-3">          Radius Full (Pill) - Surface        </h3>        <div className="flex flex-wrap items-center gap-2">          <Button            variant="surface"            color="primary"            radius="full"            size="xsmall"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="surface"            color="primary"            radius="full"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="surface"            color="primary"            radius="full"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="surface"            color="primary"            radius="full"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="surface"            color="primary"            radius="full"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XLarge          </Button>        </div>      </div>      <div>        <h3 className="text-sm font-medium mb-3">          Radius Full (Pill) - Outlined        </h3>        <div className="flex flex-wrap items-center gap-2">          <Button            variant="outlined"            color="primary"            radius="full"            size="xsmall"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            XSmall          </Button>          <Button            variant="outlined"            color="primary"            radius="full"            size="small"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Small          </Button>          <Button            variant="outlined"            color="primary"            radius="full"            size="medium"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Medium          </Button>          <Button            variant="outlined"            color="primary"            radius="full"            size="large"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            Large          </Button>          <Button            variant="outlined"            color="primary"            radius="full"            size="xlarge"            startIcon={<BlankOutline20Icon />}            endIcon={<BlankOutline20Icon />}          >            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>
  );
}

'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>
  );
}

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>
  );
}

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>  );}

Button.tsx의 hover: / active: / focus: 스타일을 상태별로 고정해서 보여줍니다. Default/Disabled 열은 실제 prop을 그대로 사용하고, Hover/Active/Focus 열은 마우스를 올리거나 클릭하지 않아도 확인할 수 있도록 코드에 정의된 동일한 클래스를 고정 적용한 것입니다. 실제 버튼도 위 예시들처럼 마우스를 올리거나(hover) 클릭(active)하거나 탭으로 포커스(focus)를 주면 동일하게 반응합니다.

Surface

Default

Hover

Active

Focus

Disabled

Outlined

Default

Hover

Active

Focus

Disabled

'use client';

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

/**
 * hover/active/focus 열은 실제 마우스/키보드 인터랙션 없이도 상태를 확인할 수 있도록
 * Button.tsx의 해당 compoundVariants(hover:/active:/focus:)에 정의된 클래스를
 * 접두사(hover:/active:/focus:) 없이 그대로 재사용해 고정 표시합니다.
 * (Default/Disabled 열은 실제 prop을 그대로 사용합니다.)
 */
export default function ButtonStates() {
  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-4">
          <div className="flex flex-col items-center gap-1.5">
            <Button variant="surface" color="primary">
              Default
            </Button>
            <span className="text-xs text-text-alternative">Default</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="surface"
              color="primary"
              className="bg-action-primary-hover"
            >
              Hover
            </Button>
            <span className="text-xs text-text-alternative">Hover</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="surface"
              color="primary"
              className="bg-action-primary-active"
            >
              Active
            </Button>
            <span className="text-xs text-text-alternative">Active</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="surface"
              color="primary"
              className="ring-0 before:border-2 before:border-action-primary before:shadow-[inset_0_0_0_1px_white]"
            >
              Focus
            </Button>
            <span className="text-xs text-text-alternative">Focus</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button variant="surface" color="primary" disabled>
              Disabled
            </Button>
            <span className="text-xs text-text-alternative">Disabled</span>
          </div>
        </div>
      </div>
      <div>
        <h3 className="text-sm font-medium mb-3">Outlined</h3>
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex flex-col items-center gap-1.5">
            <Button variant="outlined" color="primary">
              Default
            </Button>
            <span className="text-xs text-text-alternative">Default</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="outlined"
              color="primary"
              className="text-white bg-action-primary-hover"
            >
              Hover
            </Button>
            <span className="text-xs text-text-alternative">Hover</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="outlined"
              color="primary"
              className="text-white bg-action-primary-active"
            >
              Active
            </Button>
            <span className="text-xs text-text-alternative">Active</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button
              variant="outlined"
              color="primary"
              className="text-white bg-action-primary ring-0 before:border-2 before:border-action-primary before:shadow-[inset_0_0_0_1px_white]"
            >
              Focus
            </Button>
            <span className="text-xs text-text-alternative">Focus</span>
          </div>
          <div className="flex flex-col items-center gap-1.5">
            <Button variant="outlined" color="primary" disabled>
              Disabled
            </Button>
            <span className="text-xs text-text-alternative">Disabled</span>
          </div>
        </div>
      </div>
    </div>
  );
}

'use client';import { Button } from '@aift/ui/Button';/** * hover/active/focus 열은 실제 마우스/키보드 인터랙션 없이도 상태를 확인할 수 있도록 * Button.tsx의 해당 compoundVariants(hover:/active:/focus:)에 정의된 클래스를 * 접두사(hover:/active:/focus:) 없이 그대로 재사용해 고정 표시합니다. * (Default/Disabled 열은 실제 prop을 그대로 사용합니다.) */export default function ButtonStates() {  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-4">          <div className="flex flex-col items-center gap-1.5">            <Button variant="surface" color="primary">              Default            </Button>            <span className="text-xs text-text-alternative">Default</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="surface"              color="primary"              className="bg-action-primary-hover"            >              Hover            </Button>            <span className="text-xs text-text-alternative">Hover</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="surface"              color="primary"              className="bg-action-primary-active"            >              Active            </Button>            <span className="text-xs text-text-alternative">Active</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="surface"              color="primary"              className="ring-0 before:border-2 before:border-action-primary before:shadow-[inset_0_0_0_1px_white]"            >              Focus            </Button>            <span className="text-xs text-text-alternative">Focus</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button variant="surface" color="primary" disabled>              Disabled            </Button>            <span className="text-xs text-text-alternative">Disabled</span>          </div>        </div>      </div>      <div>        <h3 className="text-sm font-medium mb-3">Outlined</h3>        <div className="flex flex-wrap items-center gap-4">          <div className="flex flex-col items-center gap-1.5">            <Button variant="outlined" color="primary">              Default            </Button>            <span className="text-xs text-text-alternative">Default</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="outlined"              color="primary"              className="text-white bg-action-primary-hover"            >              Hover            </Button>            <span className="text-xs text-text-alternative">Hover</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="outlined"              color="primary"              className="text-white bg-action-primary-active"            >              Active            </Button>            <span className="text-xs text-text-alternative">Active</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button              variant="outlined"              color="primary"              className="text-white bg-action-primary ring-0 before:border-2 before:border-action-primary before:shadow-[inset_0_0_0_1px_white]"            >              Focus            </Button>            <span className="text-xs text-text-alternative">Focus</span>          </div>          <div className="flex flex-col items-center gap-1.5">            <Button variant="outlined" color="primary" disabled>              Disabled            </Button>            <span className="text-xs text-text-alternative">Disabled</span>          </div>        </div>      </div>    </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>
  );
}

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' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'extra' \| 'full'`	`'medium'`	버튼의 모서리 둥글기
disabled	`boolean`	`false`	비활성화 여부
asChild	`boolean`	`false`	자식 요소를 버튼으로 사용
loading	`boolean`	`false`	로딩 상태
startIcon	`React.ReactNode`	-	시작 아이콘
endIcon	`React.ReactNode`	-	끝 아이콘

Button

기본 사용법

Icon

Variants

Sizes

Variant별 Sizes

Surface

Outlined

Default Outline

Default Surface

Radius Full (Pill) - Surface

Radius Full (Pill) - Outlined

Colors

Surface

Outlined

Text

Default Variants

Default Outline

Default Surface

인터랙션 상태

Surface

Outlined

Disabled 상태

Default

Primary

Positive

Cautionary

Destructive

Info

Props

On this page