Multi state badge

Introduction

The Multi state badge example shows how to build a dynamic badge component that transitions smoothly between four different states: idle, processing, success, and error. Each state has its own icon, label, and custom animations that bring the badge to life.

This tutorial uses several APIs from Motion: the animate() function for creating smooth animations with spring physics and timing controls, the press() function for handling user interactions, the motionValue() function for reactive animation values, and the transform() utility for mapping values between ranges.

Get started

Create a button with a badge container that will hold our dynamic content:

<div class="container">
    <button id="badge">
        <div class="badge">
            <div class="icon-container"></div>
            <div class="label-container">
                <div class="label-measure"></div>
                <div class="label"></div>
            </div>
        </div>
    </button>
</div>

<style>
    /** Copy styles from example source code */
</style>

<script>
    // We'll add our logic here
</script>

The structure uses separate containers for the icon and label to enable independent animations. The .label-measure element is a hidden element used to calculate the width of text before animating - this ensures smooth width transitions regardless of the label length.