How to hide the download button when download is not available

[ash67]

I would like to hide the download button for the slides which are not non-downloadable. When setting dowload: false, it does show the disabled icon which is cool, but I want to completely hide it. Is that possible?

Also, when rendering customIcon, is it possible to use a different icon when hover/clicking on the download button.

Any help would be greatly appreciated. Thanks!

[igordanchenko]

I would like to hide the download button for the slides which are not non-downloadable. When setting dowload: false, it does show the disabled icon which is cool, but I want to completely hide it. Is that possible?

Sure, you can hide the inactive Download button with the following CSS customization:

.yarl__button[aria-label="Download"]:disabled {
  display: none;
}

Also, when rendering customIcon, is it possible to use a different icon when hover/clicking on the download button.

Not unless you implement your own DownloadButton and render it through render.buttonDownload.

However, you can target :hover and :active states and provide certain customizations with CSS.

.yarl__button[aria-label="Download"]:hover {
  /* ... */
}

.yarl__button[aria-label="Download"]:active {
  /* ... */
}

[ash67]

Thanks so much!