New feature: outline badges

[andresgalante]

This PR closes #23882

It adds outlined badges and they look like this:

Do you think it's worth adding the same hover animation to badges as in btns for consistency?

[XhmikosR]

@andresgalante: maybe change the light badge to use a darker background?

As for the animation, personally I'd add it, but let's wait for @mdo to chime in.

[fdabek1]

Is there any progress on getting this integrated? Currently I am using the button classes to get around this:

<span class="badge btn btn-outline-primary">Primary</span>

[ocarreterom]

Should not it have the same size for normal and outline?
Buttons have it:

[killswitch-GUI]

This is awesome: bump!

[royklutman]

Is there any update on this? Would love to see this merged.

[MartijnCuppens]

I would love this feature!

I think it's better adding the same hover animation to badges as in .btns for consistency. Also as @ocarreterom mentioned, it would be nice if the normal and outline variants have the same size.

[MartijnCuppens]

I've made another PR which takes care of the focus state of default linked badges (#27136), this PR also adds the transition.

[mdo]

Looks good overall. One thing though is this might need to update our print styles to somehow account for the colored borders. Perhaps a :not() selector? See https://github.com/twbs/bootstrap/blob/v4-dev/scss/_print.scss#L103-L105.

[ysds]

Now, we can make a outlined badge by utility classes. Please reconsider the necessity of new specific classes.

<span class="badge text-primary border border-primary">Primary outlined</span>
<span class="badge text-secondary border border-secondary">Secondary outlined</span>

I think badges should have flexibility to allow various custom colors. Not only theme colors defined in Bootstrap. Please see #27149 or #27136 (comment) for more details.

[mdo]

@ysds Yeah, there are discussions here and elsewhere around how to rollback badges in v5. Do we take that stance now, or do we keep adding and improving until then?

Some things on my mind around badges:

• If we don't have hover styles, we should just be using utilities (e.g., <span class="bg-primary rounded">...</span>).
• Utilities are great, but at some point we're passing CSS weight onto page weight. At a certain scale, it's better to have component classes vs utilities repeated heavily.
• Ideally anyone can take .badge and pass their own background-color via inline style or class. This is possible now, and would remain regardless of any future changes.
• We need to be better, with badges and beyond, at saying no to things and having limitations in the core that can easily scale up.

Writing all that out, it feels like we say no to this in v4.x given their future in v5.x?

[mdo]

Punting on this for now given recent conversation around scaling back badge functionality for utilities and better differentiation from buttons in v5. (Adding to our v5 planning doc.)