A stateful button is provides visual feedback during its lifecycle. It changes its appearance based on its current state: idle, loading, and success. When clicked, the button enters a loading state to indicate that it is processing a request, and when the request is completed, the button displays a success state to indicate that the operation was successful.
This type of button enhances the user experience by keeping the user informed of the button's status and providing visual cues as to what is happening in the background.
Using Webflow, Wized and Xano to create stateful buttons.
In this guide we will be creating stateful buttons for Xano requests using Webflow and Wized.You’ll learn how to create buttons that provide visual feedback to users. We will be using Webflow to build the interface, elements, and styling of the button. And, Wized, a tool for creating web apps with Webflow, will be used to add interactivity and handle integration with the Xano API. By the end of this guide, you will have a clear understanding of how to create stateful buttons that provide a seamless user experience!
Note: This guide assumes you have already setup your Webflow project in Wized and have a working Xano endpoint.
What we’ll be doing
I’ve built out an form mockup for registering new users. This form won’t actually do anything when submitting and is just one example. This method doesn’t actually require a form, only a request to Xano. It cold be used for any kind of button on your site such as ‘Load more’, ‘Show results’ or a form submission
In Webflow we’ll be adding a button element for the idle state, and two divs, one for the loading state and one for the success state.
registerUserSubmits the request to Xano when button is clicked
isRequestingShow the loading state of our component
isSuccessfulShows the successful state of or component
idleControl when the button is in idle
In Xano, you can use any API endpoint you have in your project, there is are no additional steps in Xano. This method can be used with any Xano endpoint that provides a response.
For the purposes of this guide, I’ve just created a simple endpoint in Xano that doesn’t actually do anything except provide a response. The only thing I’m doing in the Xano Function Stack is actually a brief timeout to delay the response a little (Xano is just so damn fast!).