[EuiNotificationBadge] The number inside badge looks not centred, corner radius value is different than in the design component

[yiyangliu9286]

For EuiNotificationBadge, we have noticed that there are slightly differences between the component in the design system in Figma vs. how it looks after implementing it. See screenshots below:

• In the design system, the radius value is 3. And number looks centred.

• In what has been implemented, the radius value looks bigger. The number looks slightly not centred.

Just wondering if the team could take a look at it when there's a chance? Thanks.

[ecezalp]

so one thing I noticed about this non-centering issue - I believe that when the button is hovered, an underline shows up both for the button copy and for the number within the EuiNotificationBadge, and the number appears centered when the underline is visible. I was unable to remove the underline with any of the usual css tricks - something to keep in mind!

[cchaos]

Yep because you're putting the badge inside of a button which gets text-decoration: underline on :hover. There's no way to separate out the button content vs non-button content from the consuming side. Usually you can add text-decoration: none !important to the part you don't want to get the attribute.

But I've also seen this pattern emerging more often (notification badge inside a tab) and maybe one we can implement as part of the EuiTab itself.

[ecezalp]

But I've also seen this pattern emerging more often (notification badge inside a tab) and maybe one we can implement as part of the EuiTab itself.

this would be amazing :)

[cchaos]

I've moved the request for EuiTab to accept secondary content to a new issue #5057 so that this one can be closed via #5053 that addresses the border-radius of the notification badge.