All components (204)

Export button

Actions · ExportButton

What it is and when to use it

Downloads a chart, a table or any piece of the page as an image: PNG, SVG or PDF. It all happens in the browser and without libraries: the element is copied with the styles the browser has already computed, put inside an SVG, and the three formats come out of that.

When to use it

Next to a chart or a dashboard that people want to paste into a presentation or a report.
target is a reference (useRef) to the element, or a function that looks it up. filename is the file name, without the extension.
formats to offer fewer: with only one, the button exports directly instead of opening the menu.
scale is the real pixels per CSS pixel in the PNG and the PDF: 2 by default, 4 for printing.

When not to

Exporting the DATA of a table: exportCsv in Table.
Generating the file on the server: there are no computed styles to copy there. With a headless browser (Playwright) that opens the page, the same functions are called: exportElement, elementToPng, elementToSvg and elementToPdf.

Keyboard: Tab reaches the button; Enter or Space open the format menu, the arrows go through it and Escape closes it, returning focus to the button.

Accessibility: the result ("Exported as PNG") and any failure are announced in a status region. The PDF carries the image, not selectable text: for an accessible document, also offer the data as a table.

Fine-tuning: no variables of its own. It is a Button (outline by default, with variant, tone and size) and an ActionMenu.

Web fonts are embedded if their stylesheet is same-origin or allows CORS; if not, the text comes out in the fallback font.

What it looks like

Orders per week
Period	Orders
W1	12
W2	19
W3	15
W4	24

const informe = useRef(null)

<div ref={informe}>
  <LineChart label="Orders per week" categories={categorias} series={series} />
</div>
<ExportButton target={informe} filename="orders-per-week" formats={['png', 'pdf']} />

Props

Import it with import { ExportButton } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`filename`required	`string`	File name, without the extension.
`target`required	`ExportTarget`	What gets exported: a reference to the element or a function that looks it up.
`background`	`string`	Background of the image. By default, the element's own or its nearest ancestor's, and white if there is none.
`className`	`string`	Merged with the library classes; it does not replace them.
`formats`	`readonly ExportFormat[]`	The formats on offer. With only one, the button exports directly instead of opening the menu. By default, PNG, SVG and PDF.
`label`	`string`	—
`onError`	`(error: unknown) => void`	What to do with a failure. Without this it goes to the console.
`onExported`	`(blob: Blob, format: ExportFormat) => void`	Receives the generated file and its format, in case besides downloading it you need to upload or store it.
`scale`	`number`	Real pixels per CSS pixel in the PNG and the PDF. 2 by default, 4 for printing.
`size`	`"sm" \| "md" \| "lg"`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: