"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; export type ExportFormat = "png" | "jpg" | "svg" | "clipboard"; export interface ExportButtonProps { onExport: (format: ExportFormat) => void | Promise; formats?: ExportFormat[]; className?: string; disabled?: boolean; } const FORMAT_LABELS: Record = { png: "PNG", jpg: "JPG", svg: "SVG", clipboard: "Copy", }; type ExportState = "idle" | "exporting" | "success" | "error"; export function ExportButton({ onExport, formats = ["png", "jpg", "clipboard"], className, disabled = false, }: ExportButtonProps) { const [state, setState] = React.useState("idle"); const [activeFormat, setActiveFormat] = React.useState(null); const handleExport = async (format: ExportFormat) => { if (disabled || state === "exporting") return; setState("exporting"); setActiveFormat(format); try { await onExport(format); setState("success"); setTimeout(() => { setState("idle"); setActiveFormat(null); }, 1500); } catch { setState("error"); setTimeout(() => { setState("idle"); setActiveFormat(null); }, 2000); } }; return (

{formats.map((format) => { const isActive = state === "exporting" && activeFormat === format; const isSuccess = state === "success" && activeFormat === format; return ( ); })}

{state === "error" && ( Export failed )}

); }

Prop	Type	Default	Description
onExport	(format) => void \| Promise<void>	—	Export handler.
formats	ExportFormat[]	png, jpg, clipboard	Enabled formats.
className	string	—	Optional CSS class.

When to use

Demo

Props

Source

Dependencies

When to use

Demo

Props

Source

Dependencies