Floating Action Button
The Floating Action Button (FAB) is a circular button that floats above your app's content, always visible and easy to reach. It is designed for a single, high-priority action — such as opening a chat, navigating to the homepage, or launching a contact form. Because it stays on screen as the user scrolls, it is ideal for actions you want users to access at any time.
Tap Action
Set the URL that opens when the user taps the button.
- Default:
https://example.com - Maximum length: 500 characters
Point this to your most important call-to-action — for example, a support chat, a product page, or your app's main entry point.
Position
Choose where the button appears at the bottom of the screen.
| Option | Description |
|---|---|
| Left | Anchored to the bottom-left corner |
| Center | Centered at the bottom |
| Right | Anchored to the bottom-right corner (default) |
| Left Dock to Bottom Nav Bar | Left-aligned, attached directly above the bottom navigation bar |
| Center Dock to Bottom Nav Bar | Centered, attached directly above the bottom navigation bar |
| Right Dock to Bottom Nav Bar | Right-aligned, attached directly above the bottom navigation bar |
Use a docked position when you also have a Bottom Navigation Bar enabled — this keeps the FAB visually connected to the navigation area and avoids overlapping your page content.
Colors
Background Color
Set the background color of the button for both Light and Dark themes.
- Light Mode default:
#186E62 - Dark Mode default:
#186E62
Icon Color
Set the color of the icon displayed inside the button.
- Light Mode default:
#ffffff - Dark Mode default:
#ffffff
Choose icon and background colors with strong contrast so the button is easy to see against any page content.
Icon
Tap the icon field to open the icon picker and choose a Material Icon for the button. Pick an icon that clearly represents the action — for example, a chat bubble for support, a home icon for the homepage, or a phone icon for a call link.
Visibility Rules
You can control which pages show the FAB and which pages hide it.
Show Floating Button Only on These URLs
The button will only appear when the current URL matches one of the patterns you specify. On all other pages, the button is hidden.
Hide Floating Button on These URLs
The button is visible everywhere except on pages that match the patterns you specify.
Enter one domain, full URL, or URL fragment per line. Both fields support wildcard patterns (*) for dynamic paths and square brackets [ ] for exact URL matches.
| Example | Matches |
|---|---|
example.com/support | Any URL containing /support |
[example.com/checkout] | Only the exact URL example.com/checkout |
example.com/*/order | URLs like example.com/1/order, example.com/store/order |