file: ./content/react/components/action-button.mdx
# Action Button

사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.

<ComponentExample name="action-button-preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPreview() {
    return <ActionButton>라벨</ActionButton>;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add action-button
    ```
  </Tab>
</Tabs>

<ManualInstallation name="action-button" />

## Props

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette",
        "default": "\"fg.neutral\"",
        description: <><p>{"Color of the label and icons inside the button.\nWorks only when "}<code>{"variant"}</code>{" is "}<code>{"ghost"}</code>{"."}</p></>
    },

    variant: {
        "type": "\"brandSolid\" | \"neutralSolid\" | \"neutralWeak\" | \"criticalSolid\" | \"brandOutline\" | \"neutralOutline\" | \"ghost\"",
        "default": "brandSolid"
    },

    size: {
        "type": "\"xsmall\" | \"small\" | \"medium\" | \"large\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    loading: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    bleedX: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    }
}}
/>

## Examples

### Brand Solid

<ComponentExample name="action-button-brand-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandSolid() {
    return <ActionButton variant="brandSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Solid

<ComponentExample name="action-button-neutral-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralSolid() {
    return <ActionButton variant="neutralSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Weak

<ComponentExample name="action-button-neutral-weak">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralWeak() {
    return <ActionButton variant="neutralWeak">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Critical Solid

<ComponentExample name="action-button-critical-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonCriticalSolid() {
    return <ActionButton variant="criticalSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Brand Outline

<ComponentExample name="action-button-brand-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandOutline() {
    return <ActionButton variant="brandOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Outline

<ComponentExample name="action-button-neutral-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralOutline() {
    return <ActionButton variant="neutralOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Ghost

Ghost variant는 `color` 속성을 사용해 레이블과 아이콘의 색상을 변경할 수 있습니다.

<ComponentExample name="action-button-ghost">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonGhost() {
    return (
      <HStack gap="x2">
        <ActionButton variant="ghost">Default</ActionButton>
        <ActionButton variant="ghost" color="fg.neutralSubtle">
          Neutral Subtle
        </ActionButton>
        <ActionButton variant="ghost" color="fg.brand">
          Brand
        </ActionButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="action-button-icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonIconOnly() {
    return (
      <ActionButton layout="iconOnly">
        <Icon svg={<IconPlusFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="action-button-prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPrefixIcon() {
    return (
      <ActionButton>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="action-button-suffix-icon">
  ```tsx
  import { IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";
  import { SuffixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonSuffixIcon() {
    return (
      <ActionButton>
        라벨
        <SuffixIcon svg={<IconChevronRightFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="action-button-disabled">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonDisabled() {
    return <ActionButton disabled>라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="action-button-loading">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonLoading() {
    const [loading, setLoading] = useState(false);

    function handleClick() {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ActionButton loading={loading} onClick={handleClick}>
        시간이 걸리는 액션
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Bleed

`bleedX`, `bleedY` 속성을 사용해 버튼이 레이아웃에서 "빠져나오게" 할 수 있습니다.

Ghost variant를 시각적으로 정렬해야 할 때 유용합니다.

<ComponentExample name="action-button-bleed">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBleed() {
    return (
      <VStack width="100%" gap="x4">
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedY="asPadding" variant="brandSolid">
            Bleed Y
          </ActionButton>
        </HStack>
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedX="asPadding" bleedY="asPadding" variant="ghost">
            Bleed X and Y
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>