Button as Anchor showing link icon in black color on hover making it difficult to see

[spatil32]

I have a design requirement to use Button as Anchor tag. The button needs to be a primary variant with an external href. I tried to use @twilio-paste/button component versions 7.0.1 to latest, but in all of the versions, when I hover mouse over the button, the external link icon turns black in color making it difficult to see. Please take a look at screenshots below.

Before Hover:

After hover:

This is how my code looks like.

<Button data-s="view-all-rooms" as="a" href={roomLogsHref} variant="primary">
    See all room logs
</Button>

Is there something I am missing?

[SiTaggart]

Hi @spatil32

Do you have a Code sandbox reproduction we can get?

Outside of that is there any reason you are only updating @twilio-paste/button and not @twilio-paste/core?

If you are only updating an individual component you might have to spend particularly close attention to the peer dependency versions it requires and make sure they are up to date.

Most simply, if you only list

"@twilio-paste/core": "^x.x.x",
"@twilio-paste/icons": "^x.x.x",

as your paste dependencies, upgrades will be easier.

[spatil32]

Hi @SiTaggart, I am using the core version. 9.6.3 and I usually import all paste components from core. By installing separate versions of button components, I was trying to debug if the issue is coming after certain release. I created this code sandbox with example: https://codesandbox.io/s/using-anchor-with-react-router-forked-83wbe?file=/src/index.tsx & it seems to be working fine. I debugged the code and it seems that the issue is coming from some bootstrap styles deep down within html tree. We can close this question, I think I can override bootstrap styles in my code.