Action Button

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import { ActionButton } from "@seed-design/lynx-react";

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

import IconTagFill from "@karrotmarket/lynx-monochrome-icon/IconTagFill";

import { ActionButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ActionButton variant="ghost">
      <PrefixIcon icon={<IconTagFill />} />
      Default (fg.neutral)
    </ActionButton>
  );
}

import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";

import { ActionButton, Icon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ActionButton layout="iconOnly" accessibility-label="추가">
      <Icon icon={<IconPlusFill />} />
    </ActionButton>
  );
}

import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";

import { ActionButton, PrefixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ActionButton>
      <PrefixIcon icon={<IconPlusFill />} />
      라벨
    </ActionButton>
  );
}

import IconChevronRightFill from "@karrotmarket/lynx-monochrome-icon/IconChevronRightFill";

import { ActionButton, SuffixIcon } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <ActionButton>
      라벨
      <SuffixIcon icon={<IconChevronRightFill />} />
    </ActionButton>
  );
}

import { ActionButton } from "@seed-design/lynx-react";

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

import { useState } from "@lynx-js/react";
import { ActionButton } from "@seed-design/lynx-react";

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

  function handleTap() {
    "background only";
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  }

  return (
    <ActionButton loading={loading} bindtap={handleTap}>
      시간이 걸리는 액션
    </ActionButton>
  );
}

import { ActionButton, HStack, Text, VStack } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <VStack width="100%" gap="x4">
      <HStack
        align="center"
        justify="space-between"
        py="x2"
        borderWidth={1}
        borderColor="palette.red600"
      >
        <Text textStyle="t6Regular">세로 Bleed</Text>
        <ActionButton bleedY="8px" variant="brandSolid">
          Bleed Y
        </ActionButton>
      </HStack>
      <HStack
        align="center"
        justify="space-between"
        p="x2"
        borderWidth={1}
        borderColor="palette.red600"
      >
        <Text textStyle="t6Regular">전체 Bleed</Text>
        <ActionButton bleed="8px" variant="ghost">
          모든 방향
        </ActionButton>
      </HStack>
    </VStack>
  );
}