Download Trigger

Saves generated content as a file: `getData` may be async (export jobs); shows preparing/done/failed states and announces them. Stays focusable while preparing.

Import

import { DownloadTrigger } from '@marbleui/ui'

Props

<DownloadTrigger>

Prop	Type	Default	Description
filename *required	`string`	`—`
getData *required	`() => BlobPart \| Promise<BlobPart>`	`—`
children	`ReactNode`	`'Download'`
errorLabel	`ReactNode`	`'Try again'`
mimeType	`string`	`'text/plain'`
onDownload	`() => void`	`—`	Called after the file is handed to the browser.
onError	`(error: unknown) => void`	`—`	Called when `getData` throws or rejects. The button shows `errorLabel` and announces the failure.
size	`'sm' \| 'md' \| 'lg'`	`—`
variant	`'soft' \| 'outline' \| 'danger' \| 'solid' \| 'ghost'`	`—`

Also accepts React Aria props (111).

Usage notes

Button that builds a file in the browser and saves it, for CSV exports and generated reports. For a file that already has a URL, use a Link with download; to pick files for upload, use FileTrigger.

<DownloadTrigger variant="outline" filename="invoices-2026-q3.csv" mimeType="text/csv" getData={() => toCsv(invoices)}>
  Export CSV
</DownloadTrigger>

getData returns a string, Blob or buffer, or a promise of one (for example from an export endpoint). While it runs the button is pending (it shows a spinner and keeps focus), then reads “Downloaded” for 2 seconds; both states are announced politely. onDownload fires once the file is handed to the browser.
It accepts Button props such as variant, size and isDisabled, but not onPress. children defaults to “Download”.
If getData throws or rejects, onError gets the error, the button reads errorLabel (default “Try again”) and the failure is announced.
mimeType defaults to text/plain; set it to match the filename extension.

Example source · show

import { DownloadTrigger } from './download-trigger'

const rows = [['Order', 'Customer', 'Amount'], ['10482', 'Northwind', '480.00'], ['10481', 'Globex', '96.00']]
export const styles = {
  CSV: () => <DownloadTrigger variant="outline" filename="orders.csv" mimeType="text/csv" getData={() => rows.map((r) => r.join(',')).join('\n')}>Export CSV</DownloadTrigger>,
  'Async export': () => <DownloadTrigger filename="report.json" mimeType="application/json" getData={() => new Promise((r) => setTimeout(() => r(JSON.stringify({ generated: new Date().toISOString(), rows: rows.length - 1 }, null, 2)), 1200))}>Generate report</DownloadTrigger>,
}

Source: packages/ui/src/download-trigger/download-trigger.tsx

Catalog