Download Action

Downloads a file.

html

<div class="dl" data-state="Idle" style="--accent:#A8E6C1;">
  <div class="dl__row">
    <div>
      <p class="dl__name">invoice-8842.pdf</p>
      <p class="dl__size">1.2 MB</p>
    </div>
    <button type="button" class="dl__btn" aria-label="Download invoice-8842.pdf">&#8595;</button>
  </div>
  <div class="dl__progresswrap"><div class="dl__progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Download progress for invoice-8842.pdf" style="width:45%;"></div></div>
</div>
<style>
.dl { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 14px 16px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; }
.dl__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl__name { margin: 0; font-weight: 700; }
.dl__size { margin: 2px 0 0; font-size: 12px; color: #24143099; }
.dl__btn { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid #24143030; background: none; cursor: pointer; font-size: 14px; }
.dl[data-state="Complete"] .dl__btn { background: var(--accent); border-color: var(--accent); }
.dl__progresswrap { height: 5px; background: #24143012; border-radius: 999px; margin-top: 10px; overflow: hidden; display: none; }
.dl[data-state="Downloading"] .dl__progresswrap { display: block; }
.dl__progress { height: 100%; background: var(--accent); border-radius: 999px; }
.dl__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-[14px_16px] rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] dl-tw" data-state="Idle">
  <div class="flex items-center justify-between gap-2.5">
    <div>
      <p class="m-0 font-bold">invoice-8842.pdf</p>
      <p class="mt-0.5 mb-0 text-xs text-[#241430]/60">1.2 MB</p>
    </div>
    <button type="button" class="dl-tw-btn flex-none w-8 h-8 rounded-full border-[1.5px] border-[#24143030] bg-none cursor-pointer text-sm" aria-label="Download invoice-8842.pdf">&#8595;</button>
  </div>
  <div class="dl-tw-progresswrap h-[5px] bg-[#24143012] rounded-full mt-2.5 overflow-hidden hidden"><div class="h-full rounded-full" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Download progress for invoice-8842.pdf" style="width:45%;background:#A8E6C1"></div></div>
</div>
<style>
.dl-tw[data-state="Complete"] .dl-tw-btn { background: #A8E6C1; border-color: #A8E6C1; }
.dl-tw[data-state="Downloading"] .dl-tw-progresswrap { display: block; }
</style>

react

export function DownloadAction({
  fileName = "invoice-8842.pdf",
  fileSize = "1.2 MB",
  state = "Idle",
  progress = 45,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: "14px 16px", borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <div>
          <p style={{ margin: 0, fontWeight: 700 }}>{fileName}</p>
          <p style={{ margin: "2px 0 0", fontSize: 12, color: "#24143099" }}>{fileSize}</p>
        </div>
        <button type="button" aria-label={`Download ${fileName}`}
          style={{ flex: "none", width: 32, height: 32, borderRadius: 999, border: "1.5px solid #24143030", background: state === "Complete" ? accent : "none", borderColor: state === "Complete" ? accent : "#24143030", cursor: "pointer", fontSize: 14 }}>&#8595;</button>
      </div>
      {state === "Downloading" && (
        <div style={{ height: 5, background: "#24143012", borderRadius: 999, marginTop: 10, overflow: "hidden" }}>
          <div role="progressbar" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100} aria-label={`Download progress for ${fileName}`}
            style={{ height: "100%", width: `${progress}%`, background: accent, borderRadius: 999 }} />
        </div>
      )}
    </div>
  );
}