Component

Download link

A link with a file download icon

For usability the provided link text should indicate the file type and size of the download.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Download File

How to call this component

<%= render "components/download_link", {
  href: "/download-this"
} %>

Accessibility acceptance criteria

The download icon must:

  • be presentational and ignored by screen readers

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Custom link text (preview) 

<%= render "components/download_link", {
  href: "/download-map",
  link_text: "Download Map (PDF)"
} %>