> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Floating Action Button

You can use the `Fab` (Floating Action Button) component to toggle the visibility of the Webchat UI in your application.

<Panel>
  <Tabs>
    <Tab title="Example">
      <iframe src="https://botpress.github.io/docs-examples/iframe.html?args=&globals=&id=fab--primary" title="Fab component" className="w-full rounded-xl" height="600px" />
    </Tab>

    <Tab title="Code">
      ```jsx App.jsx wrap theme={null}
      import { Fab } from "@botpress/webchat";
      import { useState } from "react";

      function App() {
        const [isWebchatOpen, setIsWebchatOpen] = useState(false);

        return (
          <Fab
            onClick={() => setIsWebchatOpen(isWebchatOpen)}
            style={{
              position: "fixed",
              bottom: "20px",
              right: "20px",
              width: "64px",
              height: "64px",
            }}
          />
        );
      }

      export default App;
      ```
    </Tab>
  </Tabs>
</Panel>

## Props

<ResponseField name="imgUrl" type="string">
  URL to a custom icon image.
</ResponseField>

<ResponseField name="onClick" type="MouseEventHandler<HTMLButtonElement>">
  A callback function triggered when the `Fab` is clicked. Commonly used to toggle the Webchat visibility.
</ResponseField>