Primitives
Editor.DownloadButton
The PDF / PNG export trigger. Drives the bundled jspdf pipeline (or your custom backend) with an AbortController for cancellation.
Editor.DownloadButton is the export trigger. It calls usePdfGeneration under the hood - wrapping generatePDF from @docmosaic/core with an AbortController so the export can be cancelled mid-flight.
Usage
<Editor.Toolbar>
<Editor.DownloadButton />
</Editor.Toolbar>The bundled GenerationProgress overlay shows progress 0 → 1 across the optimization (30%) and render (70%) stages.
Examples
Export PNG instead of PDF
<Editor.DownloadButton format="png" />Custom filename
<Editor.DownloadButton filename="invoice-2026-06.pdf" />Cancel mid-flight
Wire your own button to dispatch actions.cancelGeneration():
import { useEditor } from '@docmosaic/react';
function CancelButton() {
const { ui, actions } = useEditor();
if (!ui.isGenerating) return null;
return <button onClick={actions.cancelGeneration}>Cancel</button>;
}Custom PDF backend
Override the bundled pipeline at the root.
<Editor.Root pdf={{ generate: myCustomGenerate, estimate: myCustomEstimate }}>
<Editor.DownloadButton />
</Editor.Root>See the custom PDF backend recipe for the full example.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| iconOnly | boolean | undefined | - | Render a compact icon-only pair
|
| variant | "default" | "cream" | "sage" | "orange" | "caramel" | "white" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined | - | Override the icon-only button variant. Defaults to |
| className | string | undefined | - | Extra classes merged onto each icon-only button. |