1. Button

Button 컴포넌트는 클릭 가능한 버튼을 생성하기 위해 사용됩니다.

다양한 크기, 색상, 변형, 아이콘 및 기타 옵션을 통해 다양한 스타일의 버튼을 구현할 수 있습니다.

1.1. Import

import { Button } from '@components/Button';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import { Button } from '@components/Button';

function Example() {
  return (
    <Button>
      Button
    </Button>
  );
}

export default Example;

2. Size

size prop을 이용하여 버튼의 크기를 설정할 수 있습니다. 가능한 값은 small, medium,large 입니다.

import { Button } from '@components/Button';

function Example() {
  return (
      <>
        <Button size="small">Small Button</Button>
        <Button size="medium">Medium Button</Button>
        <Button size="large">Large Button</Button>
      </>
  );
}

export default Example;

3. Color

color prop을 이용하여 버튼의 색상을 설정할 수 있습니다.

가능한 값은 primary, secondary,success,warning, danger,red,orange, yellow,green,blue, purple,pink, basic 입니다.

import { Button } from '@components/Button';

function Example() {
  return (
        <>
        <Button color="primary">Primary Button</Button>
        <Button color="secondary">Secondary Button</Button>
        <Button color="success">Success Button</Button>
        <Button color="warning">Warning Button</Button>
        <Button color="danger">Danger Button</Button>
        <Button color="red">Red Button</Button>
        <Button color="orange">Orange Button</Button>
        <Button color="yellow">Yellow Button</Button>
        <Button color="green">Green Button</Button>
        <Button color="blue">Blue Button</Button>
        <Button color="purple">Purple Button</Button>
        <Button color="pink">Pink Button</Button>
        <Button color="basic">Basic Button</Button>
        </>
  );
}

export default Example;

4. Radius

radius prop을 이용하여 버튼의 모서리 둥근 정도를 설정할 수 있습니다.

가능한 값은 small, medium,large,none, full 입니다.

import { Button } from '@components/Button';

function Example() {
  return (
      <>
        <Button radius="small">Radius Small Button</Button>
        <Button radius="medium">Radius MediumButton</Button>
        <Button radius="large">Radius Large Button</Button>
        <Button radius="full">Radius Full Button</Button>
        <Button radius="none">Radius None Button</Button>
      </>
  );
}

export default Example;

5. Variant

variant prop을 이용하여 버튼의 스타일 변형을 설정할 수 있습니다.

가능한 값은 solid, border,flat,light 입니다.

import { Button } from '@components/Button';

function Example() {
  return (
      <>
        <Button variant="solid">Solid Button</Button>
        <Button variant="border">Border Button</Button>
        <Button variant="flat">Flat Button</Button>
        <Button variant="light">Light Button</Button>
      </>
  );
}

export default Example;

6. Icon

icon prop을 이용하여 버튼에 아이콘을 추가할 수 있습니다.

iconPosition prop으로 아이콘의 위치를 설정할 수 있습니다.

iconSize prop으로 아이콘의 크기를 설정할 수 있습니다.

iconColor prop으로 아이콘의 컬러를 설정할 수 있습니다.

Icon에 대한 자세한 정보는 Icon Docs를 참고 하시면 됩니다.

import { Button } from '@components/Button';

function Example() {
  return (
      <>
          <Button icon="icon-home" iconPosition="left" iconSize="small">
          Left Small Icon Button
        </Button>
        <Button icon="icon-home" iconPosition="left" iconSize="medium">
          Left Medium Icon Button
        </Button>
        <Button icon="icon-home" iconPosition="left" iconSize="large">
          Left Large Icon Button
        </Button>
        <Button icon="icon-home" iconPosition="right" iconSize="small">
          Right Small Icon Button
        </Button>
        <Button icon="icon-home" iconPosition="right" iconSize="medium">
          Right Medium Icon Button
        </Button>
        <Button icon="icon-home" iconPosition="right" iconSize="large">
          Right Large Icon Button
        </Button>
      </>
  );
}

export default Example;

7. Disabled

disabled prop을 이용하여 버튼을 비활성화할 수 있습니다.

import { Button } from '@components/Button';

function Example() {
  return (
            <Button disabled>Button Disabled</Button>
  );
}

export default Example;

8. ClassName

className prop을 사용하여 Button 컴포넌트의 스타일을 커스터마이징할 수 있습니다.

아래 예시는 버튼의 배경색과 텍스트 색상을 커스터마이징한 것입니다.

!아래 예시처럼 바로 적용이 가능한 부분도 있지만 CSS 우선순위에 의해서 !important를 사용해야 적용되는 부분도 있을수 있습니다. (Tailwind는 !text-xl 처럼 사용해야 합니다.)

import { Button } from '@components/Button';

function Example() {
  return (
        <Button
          variant="border"
          color="warning"
          radius="none"
          className="w-[500px] !bg-red-200 !text-blue-600"
        >
          ClassNameCustomButton
        </Button>
  );
}

export default Example;

9. Full Example with Mixed Props

여러 속성을 섞어서 사용한 버튼 예제입니다.

import { Button } from '@components/Button';

function Example() {
  return (
    <div>
      <Button variant="border" color="purple" radius="full">
        Border Purple Full Button
      </Button>
      <Button variant="light" color="warning" radius="none">
        Light Warning None Button
      </Button>
      <Button
        variant="border"
        color="warning"
        radius="none"
        className="w-[500px] !bg-red-200 !text-blue-600"
      >
        ClassNameCustomButton
      </Button>
    </div>
  );
}

export default Example;

10. Props

Button 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	Button의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	Button의 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic"`	`"basic"`
`radius`	Button의 모서리 둥근 정도를 설정합니다.	`"small" \| "medium" \| "large" \| "none" \| "full"`	`"medium"`
`variant`	Button의 변형 스타일을 설정합니다.	`"solid" \| "border" \| "flat" \| "light"`	`"solid"`
`icon`	Button에 아이콘을 추가합니다.	`IconName`	`undefined`
`iconSize`	아이콘의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`iconPosition`	아이콘의 위치를 설정합니다. (왼쪽 또는 오른쪽)	`"left" \| "right"`	`"left"`
`disabled`	Button을 비활성화 상태로 만듭니다.	`boolean`	`false`
`onClick`	Button이 클릭될 때 호출되는 핸들러입니다.	`() => void`	`undefined`