--- /** * StatefulButton — a pill submit button that visualizes an async action: * clicking shows a spinning loader, then a checkmark draws itself in on * success, before settling back to the idle label. A tiny custom element * owns the state machine (`loading` / `success` classes); every transition * — icon swap, width/scale, checkmark draw-in — is plain CSS. * * `duration` is a demo-only convenience that self-simulates the async * call so the component works standalone in previews/tests. In real use, * omit it and drive the element from your own script by calling its * `start()` method before your async call and `succeed()` once it * resolves (see docs/overview.mdx for both). */ interface Props { /** Native button type. */ type?: 'button' | 'submit' | 'reset'; /** * Demo-only: milliseconds before the built-in simulation calls * `succeed()` automatically. Omit for real use and call `start()` / * `succeed()` yourself. */ duration?: number; /** Milliseconds the checkmark stays visible before resetting to idle. */ successDuration?: number; /** Additional classes for the root element. */ class?: string; } const { type = 'button', duration, successDuration = 2000, class: className, } = Astro.props; ---

Installation

Install dependencies

Add these files

Configuration

Use it