## Download Button (S—086)

A download button that shrinks into a progress ring, counts up, then expands back with a tick and file size.

- URL: https://sundaeui.dev/components/download-button
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/download-button.json`
- Tags: file, download, progress, loading, ring, button

Click and the label collapses into a circle whose ring fills with progress, with the percentage in the middle. When it finishes the button grows back out with a tick and "Downloaded".
Clicking the ring mid-way cancels. It takes a progress value from you, so it works with any fetch or stream.

### Usage

```tsx
import { DownloadButton } from '@/components/sundae/download-button'

<DownloadButton />
```

### Props

- `progress` (`number | null`, required): null = idle, 0–1 = downloading, 1 = done.
- `onStart / onCancel` (`() => void`): Actions.
- `label` (`string`, default `'Download'`): Idle label.
- `size` (`string`): File size shown beside the label.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Exports, invoices, reports, app installers.

### When not to use

- Instant downloads: a plain link is enough.

### Accessibility

- While downloading, a progressbar with aria-valuenow; the ring button is named "Cancel download".
- Completion is announced politely.
- Reduced motion removes the movement and keeps every state change.