FloatingActionButton

import { FloatingActionButton } from "@fanvue/ui";
import type { FloatingActionButtonProps } from "@fanvue/ui";

import { AddIcon, FloatingActionButton } from "@fanvue/ui";

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

import { AddIcon, FloatingActionButton } from "@fanvue/ui";

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

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>

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>

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>