Action Button

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

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

npx @seed-design/cli@latest add action-button

pnpm dlx @seed-design/cli@latest add action-button

yarn dlx @seed-design/cli@latest add action-button

bun x @seed-design/cli@latest add action-button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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