> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/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.

> [tab] Example
>
> [Fab component](https://botpress.github.io/docs-examples/iframe.html?args=\&globals=\&id=fab--primary)

> [tab] Code
>
> ```jsx App.jsx wrap theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
> 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;
> ```

## Props

**imgUrl** `string`

URL to a custom icon image.

**onClick** `MouseEventHandler\<HTMLButtonElement\>`

A callback function triggered when the `Fab` is clicked. Commonly used to toggle the Webchat visibility.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.