# Component/Button/FloatingButton

> Props: component-button-floatingbutton.props.txt

## Examples


### Base

FloatingButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.

```tsx
{
  args: {
    children: '오픈 버튼'
  },
  parameters: {
    docs: {
      description: {
        story: 'FloatingButton 버튼으로써의 동작만 제공함으로 오픈여부에 노출되는 컨텐츠부의 애니메이션 및 컨트롤은 사용처에서 처리합니다.'
      }
    }
  },
  render: args => {
    const [open, setOpen] = useState(args.opened);
    useEffect(() => {
      if (args.opened !== undefined) {
        setOpen(args.opened);
      }
    }, [args.opened]);
    return <Stack direction='row' height={500}>
        <Stack direction='row' gap={12} align='center' css={[`
          position: fixed;
          right: 24px;
          bottom: 24px;
        `]}>
          <Button>피드백</Button>
          <FloatingButton {...args} opened={open} onClick={() => setOpen(prev => !prev)} />
        </Stack>
      </Stack>;
  }
}
```