# Multi-State Badge > A badge component that cycles through idle, processing, success, and error states with smooth animated transitions in Svelte Motion. **Source:** [https://motion.svelte.page/examples/multi-state-badge](https://motion.svelte.page/examples/multi-state-badge) **Markdown mirror:** [https://motion.svelte.page/examples/multi-state-badge.md](https://motion.svelte.page/examples/multi-state-badge.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: multi-state badge. A badge that cycles `idle → processing → success → error → idle`. Click to advance. Each state swap exits and enters its icon + label inside `AnimatePresence`, with blur + scale carrying the transitions. **Metadata:** tag: `ANIMATE-PRESENCE` | pattern: `state-cycle` ### Notes - The badge holds an enum state (`idle`, `processing`, `success`, `error`) — clicking advances to the next via `getNextState()`. State change drives every animation downstream. - Icon + label both live inside `AnimatePresence` keyed by state. Exit blurs and shrinks the outgoing content; enter blurs and grows the incoming content. Layout stays put because the badge chrome wraps the presence. - The composition lives in `$lib/examples/multi-state-badge/Badge.svelte` alongside icon helpers. The demo file is a thin wrapper that owns the state cycle — the animation lives in the badge components. ### Source #### Default.svelte Source file: [src/lib/examples/multi-state-badge/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/demos/Default.svelte) ```svelte
// multi-state badge state: {badgeState}
styles.container)}>
click badge to advance 4 states / animate-presence
``` #### Badge.svelte Source file: [src/lib/examples/multi-state-badge/Badge.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/Badge.svelte) ```svelte ({ ...styles.badge, gap: badgeState === 'idle' ? 0 : 8 }))} > ``` #### Icon.svelte Source file: [src/lib/examples/multi-state-badge/Icon.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/Icon.svelte) ```svelte styles.iconContainer)} animate={{ width: badgeState === 'idle' ? 0 : 20 }} transition={SPRING_CONFIG} > styles.icon)} initial={{ y: -40, scale: 0.5, filter: 'blur(6px)' }} animate={{ y: 0, scale: 1, filter: 'blur(0px)' }} exit={{ y: 40, scale: 0.5, filter: 'blur(6px)' }} transition={{ duration: 0.15, ease: 'easeInOut' }} > {#if badgeState === 'processing'} {:else if badgeState === 'success'} {:else if badgeState === 'error'} {/if} ``` #### Check.svelte Source file: [src/lib/examples/multi-state-badge/Check.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/Check.svelte) ```svelte ``` #### Loader.svelte Source file: [src/lib/examples/multi-state-badge/Loader.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/Loader.svelte) ```svelte ({ rotate: $rotate, display: 'flex', alignItems: 'center', justifyContent: 'center', width: ICON_SIZE, height: ICON_SIZE }))} > ``` #### XIcon.svelte Source file: [src/lib/examples/multi-state-badge/XIcon.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/XIcon.svelte) ```svelte ``` #### Label.svelte Source file: [src/lib/examples/multi-state-badge/Label.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/multi-state-badge/Label.svelte) ```svelte
({ position: 'absolute', visibility: 'hidden', whiteSpace: 'nowrap' }))} > {STATES[badgeState]}
({ position: 'relative' }))} animate={{ width: labelWidth }} transition={SPRING_CONFIG} > ({ textWrap: 'nowrap' }))} initial={{ y: -20, opacity: 0, filter: 'blur(10px)', position: 'absolute' }} animate={{ y: 0, opacity: 1, filter: 'blur(0px)', position: 'relative' }} exit={{ y: 20, opacity: 0, filter: 'blur(10px)', position: 'absolute' }} transition={{ duration: 0.2, ease: 'easeInOut' }} > {STATES[badgeState]} ```