Building a button component, that changes automatically on Promise resolution

Image for post
Image for post

Users should know the outcome of an action they performed. A common UX pattern is buttons with loading, success and error states.

Changing those states on each action, be it easy with Vue, can be tedious, with allot of repeating code. You have to assign classes, change button text, revert the state and so on.

In this post I will show you how to leverage Promises and event handlers, to automatically change a button’s state. For styling I am using Bulma, but you can easily fit this to work with your custom styles.

This post was inspired from a recent fix in the release of Vue 2.6. …

About

Dobromir Hristov

I am a JavaScript developer with a passion for tech.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store