Links badges without href breaks color

[inwardmovement]

Links badges should be usable without href attribute, to be used like buttons. For now _reboot.scss breaks badge color:

a:not([href]) {
  color: inherit;
  [...]
}

Suggested fixes:

• _reboot.scss:

a:not([href]):not(.badge)

• provide support for using .badge-* classes on a <button> element, having the same styling as using them on a <a> element (no .btn styling).

• add preventDefault() on anchor tags with href, like for link buttons

[rohit2sharma95]

@inwardmovement Why are you removing href attribute from anchor tag? 🤔
Though, you can also use .text-white and .text-body classes to prevent this behavior.

[inwardmovement]

@rohit2sharma95 because I am using a link badge as a footnote ref toggling a popover showing the footnote text. See this in action here:

If I leave href then an undesirable scroll to top happens.
Indeed for now I use this fix (I'd rather not use utility classes):

.footnote-badge {
  color: #fff !important; // fix badge link with no href
}

As another suggested fix we could use preventDefault() like for link buttons. But I feel this should be a Bootstrap "native" behavior, just like link buttons.

[bbugh]

I just ran into this as well, sort of, in the case where we wanted a <button> to be a link badge. @inwardmovement use case is more appropriate for a button as well, but the badges don't work for buttons in BS5. Supporting button tags with the link badges like btn classes seems like a good solution.

[ffoodd]

Duplicate of #31391 and ##30531 — resolved with #30830.