       )
       div({className: 'note'}, tr('~FILE_DIALOG.DOWNLOAD_NOTE', {download: tr('~FILE_DIALOG.DOWNLOAD')}))
       (div {className: 'buttons'},
-        (a {
-          href: '#'
-          ref: 'download'
-          className: (if confirmDisabled then 'disabled' else '')
-          download: @state.downloadFilename
-          onClick: @confirm
-          onContextMenu: @contextMenu
-        }, tr '~FILE_DIALOG.DOWNLOAD')
+        if @state.supportsDownloadAttribute then downloadAnchor else downloadButton
         (button {onClick: @cancel}, (tr "~FILE_DIALOG.CANCEL"))
       )
     )
        provider: @props.provider
      @props.dialog.callback metadata
      @props.close()
    else
      e?.preventDefault()
    return

          gotContent: true
          content: envelopedContent

    # Using the React onClick handler for the download button yielded odd behaviors
    # in which the onClick handler got triggered multiple times and the default
    # handler could not be prevented, presumably due to React's SyntheticEvent system.
    # The solution here is to use standard browser event handlers.
    @refs.download.addEventListener 'click', @confirm

  componentWillUnmount: ->
    @refs.download.removeEventListener 'click', @confirm

  filenameChanged: ->
    filename = @refs.filename.value
    @setState
