Float Buttons

Float Buttons are dynamic, interactive UI elements that remain positioned above the page content. They are ideal for providing users with quick access to important or frequently used actions — such as opening a form, navigating to another page, or triggering custom commands.

Adding a Float Button

Float Buttons are only available on pages that support element-based design, such as Main, Listing, or Web.
To add a floating button:

Float Buttons in Applin

  1. Open a supported page (e.g., Main).
  2. Click on any element inside the page canvas.
  3. Open the Page Editor tab.
  4. Click Add Float Button.

Float Buttons in Applin

Applin Studio will instantly place a new floating button on the screen, ready for customization.

Float Button Actions

Once a Float Button exists on the page, clicking on it reveals a full list of customization actions:

Float Buttons in Applin

  • Add Float Button — Create a new floating button
  • Edit Float Button — Open the full editor for deep customization
  • Edit Float Button (Fast) — Quickly adjust essential fields
  • Up/Down Float Button — Move the button vertically
  • Duplicate Float Button — Clone the current floating button
  • Delete Float Button — Remove the floating button entirely

These options allow complete control over button appearance, behavior, and positioning.

Full Editing — Float Button

To fully edit a floating button, click Edit Float Button.
You can adjust every visual and functional property and immediately preview the changes in real time.

Float Buttons in Applin

Float Buttons support rich styling options such as size, color, corner radius, shadow, and logo customization. You can also configure tap and long-press interactions using Applin Commands.

Field Reference

Field Type Default Value Description
Color Color {color} Background color of the floating button. Can be customized to match UI/brand.
Size Number 90 Diameter of the button in pixels.
Radius Number 1000 Corner radius. Large values create a full circular shape.
Elevation Number 1 Shadow depth for the floating visual effect.
Logo Logo {logo} Icon or image displayed inside the button.
Logo.Size Number 30 Size of the internal logo.
OnClick Array [] Commands executed when the button is tapped.
OnLongClick Array [] Commands executed when the button is long-pressed.

This level of customization allows you to create unique visual components that match your interface design and user behavior patterns.

Fast Editing — Float Button (Fast Mode)

If you only need to make simple updates — such as changing the color or logo — choose Edit Float Button (Fast).

Float Buttons in Applin

Fast Mode lets you:

  • Change the button color
  • Replace or update the logo

This mode is ideal for rapid adjustments or when you are fine-tuning multiple pages.

Repositioning the Float Button

Using Up/Down Float Button, you can shift the button vertically along the page.
Float Buttons in Applin
This allows precise placement, ensuring the button does not overlap other UI elements or conflict with device-safe areas.

Duplicating a Float Button

The Duplicate Float Button option instantly creates an identical copy of your button.
Float Buttons in Applin

This is useful when designing apps that require multiple floating actions with similar styling. Duplicate first, then adjust the actions or icons as needed.

Deleting a Float Button

To remove a floating button from the page, simply choose Delete Float Button.
Float Buttons in Applin

The button disappears immediately from both the editor and preview.

🔗 Additional Resources

To learn how to develop Float Buttons using pure JSON coding, visit:
Develop the Float Button with JSON