A Button with only icon and external link does not show icon

[david-nathanael]

Hi, im assuming this is a bug. A button with an icon and an external link will not display the icon. It only displays the arrow indicating an external link.

     <Button
        iconId="ri-download-line"
        linkProps={{
          href: 'https://google.com',
        }}
        priority="tertiary no outline"
        title="Label button"
      />

https://stackblitz.com/edit/nextjs-ztzuot?file=pages%2Findex.tsx

Thanks

[garronej]

Hi @david-nathanael, Thank you for bringing this to our attention and for providing the reproduction sandbox. This is clearly not the intended behavior. I believe it's now up to @gouvfr/dsfr to determine the appropriate course of action. External links should indeed display a small icon indicating that clicking the link will take the user away from the current website. However, when it comes to an icon button, it's unclear whether both icons should be retained or if an exception to the general rule can be made. I'll consult the core dsfr team for guidance.

[garronej]

Looks like the issue only arrise when using remix icons...

[david-nathanael]

i didn't succeed even with fr icons.

if it helps, my use case is to have a download button on the end of the row in a table. the link targets the api url, thats why its external.

let me know how i can help.

[garronej]

Sorry @david-nathanael, I got the wrong idea.

Hello @lab9fr,
The issue here isn't related to React dsfr nor the remix icons.
You can reproduce just by using target="blank" on the <a />

You can see the reproduction here: https://stackblitz.com/edit/nextjs-yffvvb?file=pages%2Findex.tsx

@david-nathanael The thing is react-dsfr automatically makes external links open in new tabs by default: https://github.com/codegouvfr/react-dsfr/blob/5df9212bce701b8272f215393a6a16c63799ef61/src/link.tsx#L90

[garronej]

@david-nathanael In the meantime you can sircumvent the problem by writing:

            <Button
                iconId="fr-icon-account-circle-fill"
                linkProps={{
                    href: 'https://google.com',
                    target: undefined,
                    rel: undefined,
                }}
                priority="tertiary no outline"
                title="Label buttons"
            />

This will probably make your user leave the website which isn't great.

So maybe the best is to just do:

            <Button
                iconId="fr-icon-account-circle-fill"
                onClick={()=> window.open("https://google.com", '_blank');}
                priority="tertiary no outline"
                title="Label buttons"
            />

The url won't be visibe at the bottom left of the screen when hovering the button and it won't be possible to do a right-click -> copy the link to clipboard but other thant that it will work....

[david-nathanael]

thanks for the workaround. feel free to close the issue if you dont need it