ExportButton

Split-button trigger for downloading the current dashboard state. The left half labels the action (`↓ Export`); the right half opens a dropdown with the avai…

Split-button trigger for downloading the current dashboard state. The left half labels the action (↓ Export); the right half opens a dropdown with the available formats and invokes onExport(format) on selection.

import { ExportButton } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`onExport`	Required	`(format: ExportFormat) => void`	—	Fires with the chosen format when the user picks an item.
`formats`	Optional	`readonly ExportFormat[] \| undefined`	—	Formats to offer in the dropdown — defaults to `['csv', 'json']`.
`label`	Optional	`string \| undefined`	—	Button label — defaults to `'Export'`.
`disabled`	Optional	`boolean \| undefined`	—	Disable the button.
`className`	Optional	`string \| undefined`	—	Optional class hook on the wrapper.

Usage

Split-button trigger for downloading dashboard data. Left half labels the action; right half opens a DropdownMenu with the available formats. Pairs with useDashboardExport from @tetherto/mdk-react-adapter, which serializes whatever is currently in the TanStack Query cache.

Notes

The component is presentation-only. It does not decide what to serialize — the page-level handler reads from the cache (via useDashboardExport) and triggers the download.
Pass formats={['csv']} if you want a single-format button.

Example

/** * Runnable example for ExportButton. * * The handler in this demo just logs the selected format. A real page * would wire it to `useDashboardExport` from `@tetherto/mdk-react-adapter`. */import { ExportButton } from '@tetherto/mdk-react-devkit'export const ExportButtonExample = () => (  <ExportButton    onExport={(format) => {      console.warn('Export requested:', format)    }}  />)