# Action Button
URL: /react/components/action-button
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/action-button.mdx

명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.

사용 가능 버전: @seed-design/react@0.0.1, @seed-design/css@0.0.1

## Preview

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

## Installation

- npm: npx @seed-design/cli@latest add ui:action-button
- pnpm: pnpm dlx @seed-design/cli@latest add ui:action-button
- yarn: yarn dlx @seed-design/cli@latest add ui:action-button
- bun: bun x @seed-design/cli@latest add ui:action-button

## Props

## Examples

### Brand Solid

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Neutral Solid

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Neutral Weak

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Critical Solid

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Brand Outline

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Neutral Outline

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

### Ghost

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

```tsx
import { HStack, PrefixIcon, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { IconTagFill } from "@karrotmarket/react-monochrome-icon";

export default function ActionButtonGhost() {
  return (
    <VStack gap="spacingY.componentDefault" align="center">
      <HStack gap="x2">
        <ActionButton variant="ghost">
          <PrefixIcon svg={<IconTagFill />} />
          Default (fg.neutral)
        </ActionButton>
        <ActionButton variant="ghost" color="fg.neutralSubtle">
          <PrefixIcon svg={<IconTagFill />} />
          Neutral Subtle
        </ActionButton>
        <ActionButton variant="ghost" color="fg.brand">
          <PrefixIcon svg={<IconTagFill />} />
          Brand
        </ActionButton>
      </HStack>
      <HStack gap="x2">
        <ActionButton variant="ghost">Default (Bold)</ActionButton>
        <ActionButton variant="ghost" fontWeight="medium">
          Medium
        </ActionButton>
        <ActionButton variant="ghost" fontWeight="regular">
          Regular
        </ActionButton>
      </HStack>
    </VStack>
  );
}
```

### 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" aria-label="추가">
      <Icon svg={<IconPlusFill />} />
    </ActionButton>
  );
}
```

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

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

### Disabled

```tsx
import { ActionButton } from "seed-design/ui/action-button";

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

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

### Bleed

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

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

```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 bleed="asPadding" variant="ghost">
          Bleed all sides
        </ActionButton>
      </HStack>
    </VStack>
  );
}
```