⚠️ V1 Documentation: This article reflects Frontly’s previous builder. While most of the concepts still apply in the latest version, the screenshots and step-by-step instructions may differ from what you see in the current builder.
Type: Basics
CSS Enabled: ✅
At Frontly, we understand the pivotal role that web buttons play in enhancing the user experience and streamlining processes. Our web buttons aren't just static, one-size-fits-all components; they're dynamic, versatile, and highly customizable. Whether you're using it to update your data sources, updating the message on a banner, directing your users to new pages, or even sending off emails, our Frontly's customizable Button Block is your gateway to limitless possibilities.
Overview
The Frontly button is a feature that can be added to your page as a standalone block.
The Button block in Frontly comes with a wide range of styling controls, allowing you to customize everything from spacing and colors to font settings, icons, and borders. Whether you're aiming for a clean minimalist look or something more modern, the styling options give you plenty of flexibility to match your app’s overall design.
Worth noting is that some blocks, like the Form block, are already connected to buttons or buttons with actions connected to them. However, depending on your UI and UX needs, they can be detached from their block and recreated through an isolated button click and custom action configuration!
Creating and Layering Click Actions
Clicking into the 'Click Action' will open up a list of action types displayed below.
You can queue up multiple different actions from your button click by scrolling to the bottom of the menu and clicking "+". This will open up the same menu for you to specify the next action in the sequence, and you can do this as many times as you like! Steps can be deleted or edited via the "..." in the top right and their ordering can be adjusted very simply by clicking and dragging their modals up and down.
Creating multi-action buttons streamlines tasks, reduces errors, and boosts efficiency, benefiting users with simplified experiences and developers with enhanced functionality!