PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Download Button

A multi-state download button that smoothly morphs from idle into connection, expanded live progress card with pause/resume controls, and success checkmark.

When to use

  • Software release landing pages, installer download triggers, and file export actions.
  • Transforming a single button into an active download monitor with live speed calculation and progress bars.
  • Allowing users to pause, resume, or abort downloads without opening a separate modal or drawer.

When not to use

  • Instant document exports that complete under 100ms.
  • Batch multi-file download lists where a table format is more appropriate.

API Reference

DownloadButtonProps

PropTypeDefaultDescription
fileSizeMbnumber128Total file size in Megabytes for simulation calculation.
fileNamestring"PaceUI.dmg"File name displayed in the active downloading status banner.
onComplete() => void—Callback fired when the download reaches 100% completion.
classNamestring—Additional CSS class names.

Motion

  • Dynamic dimensional morphing between 48px circle, 150px connecting pill, and 300x84px expanded progress card.
  • Spring transition (stiffness: 260, damping: 30) prevents abrupt layout shift during stage transitions.
  • Morphing icons between Download, LoaderCircle, Pause, Play, and Check via MorphIcon.