Export Action

Generates/export data.

html

<div class="exp">
  <p class="exp__title">Export 128 rows</p>
  <p class="exp__file">customers-export.<span data-format="CSV">CSV</span></p>
  <p class="exp__hint">Column headers included on row 1.</p>
  <button type="button" class="exp__btn" style="background:#A8E6C1;">Export as CSV</button>
</div>
<style>
.exp { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; padding: 16px 18px; border-radius: 12px; box-sizing: border-box; border: 1px solid #24143018; }
.exp__title { margin: 0 0 4px; font-weight: 700; }
.exp__file { margin: 0 0 8px; font-size: 12px; color: #24143099; font-variant-numeric: tabular-nums; }
.exp__file span { text-transform: uppercase; font-weight: 700; }
.exp__hint { margin: 0 0 12px; font-size: 11px; color: #24143088; }
.exp__btn { width: 100%; padding: 10px; border-radius: 8px; border: none; color: #14351f; font-weight: 700; cursor: pointer; margin-top: 6px; }
.exp__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[280px] p-[16px_18px] rounded-xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]">
  <p class="m-0 mb-1 font-bold">Export 128 rows</p>
  <p class="m-0 mb-2 text-xs text-[#241430]/60 tabular-nums">customers-export.<span class="uppercase font-bold" data-format="CSV">CSV</span></p>
  <p class="m-0 mb-3 text-[11px] text-[#241430]/50">Column headers included on row 1.</p>
  <button type="button" class="w-full py-2.5 rounded-lg border-none text-[#14351f] font-bold cursor-pointer mt-1.5" style="background:#A8E6C1">Export as CSV</button>
</div>

react

export function ExportAction({
  format = "CSV",
  fileName = "customers-export",
  rowCount = "128 rows",
  includeHeaders = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, padding: "16px 18px", borderRadius: 12, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <p style={{ margin: "0 0 4px", fontWeight: 700 }}>Export {rowCount}</p>
      <p style={{ margin: "0 0 8px", fontSize: 12, color: "#24143099", fontVariantNumeric: "tabular-nums" }}>{fileName}.<span style={{ textTransform: "uppercase", fontWeight: 700 }}>{format}</span></p>
      {includeHeaders && <p style={{ margin: "0 0 12px", fontSize: 11, color: "#24143088" }}>Column headers included on row 1.</p>}
      <button type="button" style={{ width: "100%", padding: 10, borderRadius: 8, border: "none", background: accent, color: "#14351f", fontWeight: 700, cursor: "pointer", marginTop: 6 }}>Export as {format}</button>
    </div>
  );
}