Reaction Button

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

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

export default function Example() {
  return (
    <ReactionButton>
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}

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

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

export default function Example() {
  return (
    <ReactionButton size="small">
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}

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

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

export default function Example() {
  return (
    <ReactionButton size="xsmall">
      <PrefixIcon icon={<IconBellFill />} />
      도움돼요
      <Count>1</Count>
    </ReactionButton>
  );
}

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

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

export default function Example() {
  return (
    <ReactionButton disabled>
      <PrefixIcon icon={<IconBellFill />} />
      비활성
    </ReactionButton>
  );
}

import IconBellFill from "@karrotmarket/lynx-monochrome-icon/IconBellFill";
import { useState } from "@lynx-js/react";
import { PrefixIcon, ReactionButton } from "@seed-design/lynx-react";

export default function Example() {
  const [{ pressed, loading }, setState] = useState({
    pressed: false,
    loading: false,
  });

  function handleToggle() {
    "background only";
    setState((previous) => ({ pressed: previous.pressed, loading: true }));
    setTimeout(() => {
      setState((previous) => ({ pressed: !previous.pressed, loading: false }));
    }, 2000);
  }

  return (
    <ReactionButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
      <PrefixIcon icon={<IconBellFill />} />
      시간이 걸리는 토글
    </ReactionButton>
  );
}