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

화면 위에 떠 있으며 주요 액션을 실행하는 버튼입니다.

Lynx Engine 최소 버전: 3.9

사용 가능 버전: @seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0

## Preview

```tsx
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" />;
}
```

## Installation

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

## Props

## Usage

`label`은 필수이며 기본 접근성 이름으로도 사용됩니다. `extended`의 기본값은 `true`입니다.

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

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

function handleTap() {
  "background only";
  // 새 글 작성 동작을 처리합니다.
}

export function NewPostButton() {
  return (
    <FloatingActionButton
      icon={<IconPlusLine />}
      label="새 글 작성"
      bindtap={handleTap}
    />
  );
}
```

`extended={false}`이면 label은 화면에서 숨겨지고 56×56px 아이콘 버튼으로 표시됩니다. 이때도 `label`은 Root의 접근성 이름으로 남습니다. 다른 설명이 필요하면 `accessibility-label`을 직접 지정하세요.

## Examples

### Extended

`extended` prop으로 label 표시와 레이아웃을 전환할 수 있습니다. 기본값은 `true`입니다.

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

### Float Composition

Lynx에는 React의 `<Float>` 컴포넌트가 없습니다. 위치 기준 `Box`에 `position="relative"`를 지정하고, 버튼 wrapper에 `position="absolute"`, `right`, `bottom`을 적용해 같은 배치를 구성하세요.

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

## 웹 버전과의 차이

- `onClick` 대신 `bindtap`을 사용합니다. React state를 바꾸는 handler의 첫 줄에는 `"background only"`를 두세요.
- `aria-label` 대신 `accessibility-label`을 사용합니다. Registry는 필수 `label`을 기본 접근성 이름으로 사용합니다.
- HTML button prop과 `asChild`는 지원하지 않습니다.
- React의 `Float`은 제공하지 않습니다. native absolute layout으로 위치를 지정하세요.