> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# FloatingActionButton

> A circular, elevated button for the single most important action on a screen (e.g. creating new content).

```tsx theme={null}
import { FloatingActionButton } from "@fanvue/ui";
import type { FloatingActionButtonProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-floatingactionbutton--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FloatingActionButton — Default" />
</Frame>

```tsx theme={null}
import { AddIcon, FloatingActionButton } from "@fanvue/ui";

<FloatingActionButton aria-label="Add content"><AddIcon /></FloatingActionButton>
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-floatingactionbutton--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FloatingActionButton — Disabled" />
</Frame>

```tsx theme={null}
import { AddIcon, FloatingActionButton } from "@fanvue/ui";

<FloatingActionButton aria-label="Add content" disabled><AddIcon /></FloatingActionButton>
```

## With Tooltip

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-floatingactionbutton--with-tooltip&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FloatingActionButton — With Tooltip" />
</Frame>

```tsx theme={null}
import {
  AddIcon,
  FloatingActionButton,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@fanvue/ui";

<TooltipProvider delayDuration={0}>
  <Tooltip defaultOpen>
    <TooltipTrigger asChild>
      <FloatingActionButton aria-label="Add content">
        <AddIcon />
      </FloatingActionButton>
    </TooltipTrigger>
    <TooltipContent>Add a media</TooltipContent>
  </Tooltip>
</TooltipProvider>
```

## Desktop Placement

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-floatingactionbutton--desktop-placement&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FloatingActionButton — Desktop Placement" />
</Frame>

```tsx theme={null}
import { AddIcon, FloatingActionButton } from "@fanvue/ui";

<div className="relative h-80 w-[480px] rounded-md bg-surface-secondary">
  <FloatingActionButton aria-label="Add content" className="absolute right-6 bottom-6">
    <AddIcon />
  </FloatingActionButton>
</div>
```

## Mobile Placement

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-floatingactionbutton--mobile-placement&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FloatingActionButton — Mobile Placement" />
</Frame>

```tsx theme={null}
import { AddIcon, FloatingActionButton } from "@fanvue/ui";

<div className="relative h-80 w-72 rounded-md bg-surface-secondary">
  <FloatingActionButton
    aria-label="Add content"
    className="absolute bottom-6 left-1/2 -translate-x-1/2"
  >
    <AddIcon />
  </FloatingActionButton>
</div>
```

## Props

## FloatingActionButton

A circular, elevated button for the single most important action on a screen (e.g. creating new content). Unlike `IconButton`, it always floats above page content with a drop shadow and is meant to be positioned by the consumer (e.g. `fixed bottom-6 right-6`) rather than inline in a toolbar or action row.

Requires an accessible name — pass `aria-label` or `aria-labelledby`, since the icon alone doesn't convey the action to screen readers.

<ParamField path="children" type="ReactNode" required>
  Icon to render inside the button. Pass an icon component (e.g. `<AddIcon />`).
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `FloatingActionButtonProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)