---
title: 버튼들
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="헤더" />
</Frame>

앱 전반에 걸쳐 사용되는 버튼 및 버튼 그룹의 목록.

## 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";

    export const MyComponent = () => {
      return (
        <Button
          className
          Icon={null}
          title="제목"
          fullWidth={false}
          variant="primary"
          size="medium"
          position="standalone"
          accent="default"
          soon={false}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티      | 유형                    | 설명                                                                                           |
    | --------- | --------------------- | -------------------------------------------------------------------------------------------- |
    | 클래스 네임    | 문자열                   | 추가 스타일을 위한 선택적 클래스 이름                                                                        |
    | 아이콘       | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소                                                                     |
    | 제목        | 문자열                   | 버튼의 텍스트 내용                                                                                   |
    | fullWidth | 부울                    | 버튼이 컨테이너의 전체 너비를 차지할 것인지 정의합니다                                                               |
    | 변형        | 문자열                   | 버튼의 시각적 스타일 변형. 옵션에는 `primary`, `secondary` 및 `tertiary`가 포함됩니다                              |
    | 크기        | 문자열                   | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium`                                                    |
    | 위치        | 문자열                   | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `right`, 및 `middle`가 포함됩니다 |
    | 강조        | 문자열                   | 버튼의 강조 색상. 옵션에는: `default`, `blue`, 및 `danger`가 포함됩니다                                        |
    | 곧         | 부울                    | 버튼이 "곧 출시"로 표시되는지 여부를 나타냅니다 (예: 곧 출시할 기능)                                                    |
    | 비활성       | 부울                    | 버튼이 비활성 상태인지 여부를 지정합니다                                                                       |
    | 포커스       | 부울                    | 버튼에 포커스가 있는지 나타냅니다                                                                           |
    | onClick   | function              | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수                                                                   |
  </Tab>
</Tabs>

## 버튼 그룹

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { Button } from "@/ui/input/button/components/Button";
    import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

    export const MyComponent = () => {
      return (
        <ButtonGroup variant="primary" size="large" accent="blue" className>
          <Button
            className
            Icon={null}
            title="버튼 1"
            fullWidth={false}
            variant="primary"
            size="medium"
            position="standalone"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="버튼 2"
            fullWidth={false}
            variant="secondary"
            size="medium"
            position="left"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
          <Button
            className
            Icon={null}
            title="버튼 3"
            fullWidth={false}
            variant="tertiary"
            size="medium"
            position="right"
            accent="blue"
            soon={false}
            disabled={false}
            focus={false}
            onClick={() => console.log("click")}
          />
        </ButtonGroup>
      );
    };

    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티     | 유형        | 설명                                                                    |
    | -------- | --------- | --------------------------------------------------------------------- |
    | 변형       | 문자열       | 그룹 내 버튼의 시각적 스타일 변형. 옵션에는 `primary`, `secondary`, 및 `tertiary`가 포함됩니다 |
    | 크기       | 문자열       | 그룹 내 버튼의 크기. 두 가지 옵션이 있습니다: `medium` 및 `small`                        |
    | 강조       | 문자열       | 그룹 내 버튼의 강조 색상. 옵션에는 `default`, `blue` 및 `danger`가 포함됩니다              |
    | 클래스 네임   | 문자열       | 추가 스타일을 위한 선택적 클래스 이름                                                 |
    | children | ReactNode | 그룹 내 각 버튼을 나타내는 React 요소의 배열                                          |
  </Tab>
</Tabs>

## 떠 있는 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButton
          className
          Icon={IconSearch}
          title="제목"
          size="medium"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티   | 유형                    | 설명                                                                                           |
    | ------ | --------------------- | -------------------------------------------------------------------------------------------- |
    | 클래스 네임 | 문자열                   | 추가 스타일을 위한 선택적 이름                                                                            |
    | 아이콘    | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소                                                                     |
    | 제목     | 문자열                   | 버튼의 텍스트 내용                                                                                   |
    | 크기     | 문자열                   | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium`                                                    |
    | 위치     | 문자열                   | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `middle`, 및 `right`가 포함됩니다 |
    | 그림자 적용 | 부울                    | 버튼에 그림자를 적용할지 여부를 결정합니다                                                                      |
    | 블러 적용  | 부울                    | 버튼에 블러 효과를 적용할지 여부를 결정합니다                                                                    |
    | 비활성    | 부울                    | 버튼이 비활성 상태인지 여부를 결정합니다                                                                       |
    | 포커스    | 부울                    | 버튼에 포커스가 있는지 나타냅니다                                                                           |
  </Tab>
</Tabs>

## 떠 있는 버튼 그룹

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
    import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingButtonGroup size="small">
          <FloatingButton
            className
            Icon={IconClipboardText}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
            focus={true}
          />
          <FloatingButton
            className
            Icon={IconCheckbox}
            title
            size="small"
            position="standalone"
            applyShadow={true}
            applyBlur={true}
            disabled={false}
          />
        </FloatingButtonGroup>
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티     | 유형        | 설명                                        | 기본값 |
    | -------- | --------- | ----------------------------------------- | --- |
    | 크기       | 문자열       | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` | 작은  |
    | children | ReactNode | 그룹 내 각 버튼을 나타내는 React 요소의 배열              |     |
  </Tab>
</Tabs>

## 떠 있는 아이콘 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <FloatingIconButton
          className
          Icon={IconSearch}
          size="small"
          position="standalone"
          applyShadow={true}
          applyBlur={true}
          disabled={false}
          focus={false}
          onClick={() => console.log("click")}
          isActive={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티       | 유형                    | 설명                                                                                           |
    | ---------- | --------------------- | -------------------------------------------------------------------------------------------- |
    | 클래스 네임     | 문자열                   | 추가 스타일을 위한 선택적 이름                                                                            |
    | 아이콘        | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소                                                                     |
    | 크기         | 문자열                   | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium`                                                    |
    | 위치         | 문자열                   | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `right`, 및 `middle`가 포함됩니다 |
    | 그림자 적용     | 부울                    | 버튼에 그림자를 적용할지 여부를 결정합니다                                                                      |
    | 블러 적용      | 부울                    | 버튼에 블러 효과를 적용할지 여부를 결정합니다                                                                    |
    | 비활성        | 부울                    | 버튼이 비활성 상태인지 여부를 결정합니다                                                                       |
    | 포커스        | 부울                    | 버튼에 포커스가 있는지 나타냅니다                                                                           |
    | onClick    | function              | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수                                                                   |
    | 활성 상태인지 여부 | 부울                    | 버튼이 활성 상태인지 여부를 결정합니다                                                                        |
  </Tab>
</Tabs>

## 떠 있는 아이콘 버튼 그룹

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
    import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      const iconButtons = [
        {
          Icon: IconClipboardText,
          onClick: () => console.log("Button 1 clicked"),
          isActive: true,
        },
        {
          Icon: IconCheckbox,
          onClick: () => console.log("Button 2 clicked"),
          isActive: true,
        },
      ];

      return (
        <FloatingIconButtonGroup
        className
        size="small"
        iconButtons={iconButtons} />
      );
    };

    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티   | 유형  | 설명                                                                                                        |
    | ------ | --- | --------------------------------------------------------------------------------------------------------- |
    | 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름                                                                                         |
    | 크기     | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium`                                                                 |
    | 아이콘 버튼 | 배열  | 그룹 내 각 아이콘 버튼을 나타내는 객체의 배열. 각 객체에는 버튼에 표시할 아이콘 컴포넌트, 사용자가 버튼을 클릭할 때 호출할 함수, 그리고 버튼이 활성 상태인지 여부를 포함해야 합니다. |
  </Tab>
</Tabs>

## 라이트 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { LightButton } from "@/ui/input/button/components/LightButton";

    export const MyComponent = () => {
      return <LightButton
      className
      icon={null}
      title="제목"
      accent="secondary"
      active={false}
      disabled={false}
      focus={true}
      onClick={()=>console.log('click')}
      />;
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티    | 유형                | 설명                                               |
    | ------- | ----------------- | ------------------------------------------------ |
    | 클래스 네임  | 문자열               | 추가 스타일을 위한 선택적 이름                                |
    | 아이콘     | `React.ReactNode` | 버튼에 표시할 아이콘                                      |
    | 제목      | 문자열               | 버튼의 텍스트 내용                                       |
    | 강조      | 문자열               | 버튼의 강조 색상. 옵션에는: `secondary` 및 `tertiary`가 포함됩니다 |
    | 활성      | 부울                | 버튼이 활성 상태인지 여부를 결정합니다                            |
    | 비활성     | 부울                | 버튼이 비활성 상태인지 여부를 결정합니다                           |
    | 포커스     | 부울                | 버튼에 포커스가 있는지 나타냅니다                               |
    | onClick | 기능                | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수                       |
  </Tab>
</Tabs>

## 라이트 아이콘 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <LightIconButton
          className
          testId="test1"
          Icon={IconSearch}
          title="제목"
          size="small"
          accent="secondary"
          active={true}
          disabled={false}
          focus={true}
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티    | 유형                    | 설명                                               |
    | ------- | --------------------- | ------------------------------------------------ |
    | 클래스 네임  | 문자열                   | 추가 스타일을 위한 선택적 이름                                |
    | 테스트ID   | 문자열                   | 버튼의 테스트 식별자                                      |
    | 아이콘     | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소                         |
    | 제목      | 문자열                   | 버튼의 텍스트 내용                                       |
    | 크기      | 문자열                   | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium`        |
    | 강조      | 문자열                   | 버튼의 강조 색상. 옵션에는: `secondary` 및 `tertiary`가 포함됩니다 |
    | 활성      | 부울                    | 버튼이 활성 상태인지 여부를 결정합니다                            |
    | 비활성     | 부울                    | 버튼이 비활성 상태인지 여부를 결정합니다                           |
    | 포커스     | 부울                    | 버튼에 포커스가 있는지 나타냅니다                               |
    | onClick | 기능                    | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수                       |
  </Tab>
</Tabs>

## 메인 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { MainButton } from "@/ui/input/button/components/MainButton";
    import { IconCheckbox } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <MainButton
          title="체크박스"
          fullWidth={false}
          variant="primary"
          soon={false}
          Icon={IconCheckbox}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티              | 유형                               | 설명                                                  |
    | ----------------- | -------------------------------- | --------------------------------------------------- |
    | 제목                | 문자열                              | 버튼의 텍스트 내용                                          |
    | 전체 폭              | 부울                               | 버튼이 컨테이너의 전체 너비를 차지할 것인지 정의합니다                      |
    | 변형                | 문자열                              | 버튼의 시각적 스타일 변형. 옵션에는 `primary` 및 `secondary`가 포함됩니다 |
    | 곧                 | 부울                               | 버튼이 "곧 출시"로 표시되는지 여부를 나타냅니다 (예: 곧 출시할 기능)           |
    | 아이콘               | `React.ComponentType`            | 버튼 내에 표시되는 선택적 아이콘 구성 요소                            |
    | React `button` 속성 | `React.ComponentProps<'button'>` | 모든 표준 HTML 버튼 속성을 지원합니다                             |
  </Tab>
</Tabs>

## 둥근 아이콘 버튼

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
    import { IconSearch } from "@tabler/icons-react";

    export const MyComponent = () => {
      return (
        <RoundedIconButton
          Icon={IconSearch}
        />
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티              | 유형                                              | 설명 |
    | ----------------- | ----------------------------------------------- | -- |
    | 아이콘               | `React.ComponentType`                           |    |
    | React `button` 속성 | `React.ButtonHTMLAttributes<HTMLButtonElement>` |    |
  </Tab>
</Tabs>