Badge size

[mirkocutri]

Hi,

is it possible to have different sizes for Badges? Bigger/smaller shapes and font size.

Thanks

[claviska]

Yes, they scale with the current font size so you can use font-size on the badge itself or on any ancestor element.

[mirkocutri]

Thanks for your reply.

I did so by changing to this: <wa-badge font-size="14px" variant="warning" pill="">Badge Text</wa-badge>
But this seems not to work. I tried without the "px", too. No way
What did I miss? Thanks for your help

[HovKlan-DH]

@mirkocutri , there is no font-size property directly on the component, so you need to do this with normal CSS styling. Here it is inline, but should probably better be placed in a CSS file.

<wa-badge style="font-size:14px;" variant="warning" pill>Badge Text</wa-badge>

[mirkocutri]

This worked perfectly! Thanks!!

[b-d-m-p]

This is a good candidate for @KonnorRogers 's variant example here. #77 (comment)