Floating Action Button

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

import { FloatingActionButton } from "@/components/ui/floating-action-button";

export default function Example() {
  return <FloatingActionButton icon={<IconPlusLine />} label="Example FAB" />;
}

import IconPlusLine from "@karrotmarket/lynx-monochrome-icon/IconPlusLine";
import { useState } from "@lynx-js/react";

import { VStack } from "@seed-design/lynx-react";
import { FloatingActionButton } from "@/components/ui/floating-action-button";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const [extended, setExtended] = useState(true);

  function handleCheckedChange(checked: boolean) {
    "background only";
    setExtended(checked);
  }

  return (
    <VStack align="center" gap="x6">
      <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={extended} />
      <Switch
        size="16"
        tone="neutral"
        label="Extended"
        checked={extended}
        onCheckedChange={handleCheckedChange}
      />
    </VStack>
  );
}

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

import { Box } from "@seed-design/lynx-react";
import { FloatingActionButton } from "@/components/ui/floating-action-button";

export default function Example() {
  return (
    <Box
      position="relative"
      display="flex"
      flexDirection="column"
      width="full"
      flexGrow
      minHeight="0"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Box position="absolute" right="16px" bottom="16px">
        <FloatingActionButton icon={<IconBellFill />} label="알림 설정" />
      </Box>
    </Box>
  );
}