Dev Tools

DownloadButton

Compact clickable card for downloading files. Shows a green icon box, filename with extension, and upload date. Auto-width — sits inline in content.

Import

import DownloadButton from '../../components/utility/DownloadButton.astro';

Props

PropTypeRequiredDescription
href string Yes Download URL. Rendered with the download attribute so the browser downloads the file.
filename string Yes Displayed filename including extension (e.g. TT Satoshi.zip). Should mirror the real file name.
date string Yes Upload date, pre-formatted (e.g. 13 Apr 2026).

Anatomy

  • Root: <a> with download attribute — triggers browser download
  • Card padding: 4px around the icon box, 16px on the text side
  • Icon box: 64 × 64, radius 12px, fill --color-fill-element-brand-soft
  • Download icon: 24px, color --color-content-brand
  • Text block: filename (body-md-strong, primary) + date (body-sm, tertiary)
  • Card uses the surface-action token family (same pattern as Thumbnail) for fill / border / shadow

Usage

<DownloadButton
  href="/fonts/TT_Satoshi.zip"
  filename="TT Satoshi.zip"
  date="13 Apr 2026"
/>

Live examples

Archive (.zip)

TT Satoshi.zip 13 Apr 2026

Font source (.otf)

TT Satoshi DemiBold.otf 29 Sep 2022

Long filename

Trezor-Brand-Guidelines-2026-final-v3.pdf 1 Mar 2026

Multiple in a row — auto-width, each sizes to its content

logo.svg 5 Feb 2026 logo.png 5 Feb 2026 logo-dark.zip 5 Feb 2026

Notes

  • Auto-width — the button sizes to fit its content and does not stretch in grid layouts.
  • Colors, border and shadow use semantic tokens on both rest and hover states (surface-action family + brand-soft for the icon box).
  • The date prop is a plain string — format the date in the page code, not inside the component.
  • For inline groups, wrap multiple buttons in a flex container with your own gap.
Page tokens