Button

클릭 가능한 인터랙티브 요소

Variants

6가지 variant를 제공합니다. 용도에 맞게 선택하세요.

tsx

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

Sizes

4가지 크기를 제공합니다.

tsx

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

With Icon

버튼 내부에 아이콘을 함께 사용할 수 있습니다.

tsx

<Button>
  <Mail />
  Login with Email
</Button>
<Button variant="outline">
  Next
  <ChevronRight />
</Button>

Icon Only

아이콘만 있는 버튼은 icon 사이즈를 사용합니다.

tsx

<Button size="icon-xs" variant="ghost">
  <ChevronRight />
</Button>
<Button size="icon-sm" variant="ghost">
  <ChevronRight />
</Button>
<Button size="icon" variant="outline">
  <ChevronRight />
</Button>
<Button size="icon-lg" variant="outline">
  <ChevronRight />
</Button>

States

버튼의 다양한 상태를 표현할 수 있습니다.

tsx

<Button disabled>Disabled</Button>
<Button disabled>
  <Loader2 className="animate-spin" />
  Loading...
</Button>

Usage

tsx

import { Button } from '@gpters-internal/ui';

function Example() {
  return (
    <Button variant="default" size="default">
      Click me
    </Button>
  );
}