Bootstrap: .close icon inside a .label-pill

[viktor-evdokimov]

Is there a way to put icon inside a label-pill ? When trying to put span.close inside span.label.label-pill X is oversized.

[cvrebert]

"Label with an integrated 'X' button to remove the label" does sound like a useful widget to offer. :+1:

[patrickhlauke]

note that just adding it as a <span> won't make it keyboard/AT accessible, unless you then stuff that element with tabindex=0, role=button etc. best to just stick with an actual <button> element (and not forgetting appropriate aria-label or similar)

[viktor-evdokimov]

@patrickhlauke so you are saying to put button inside span ?

@cvrebert - basically I am looking at stuff like select2 and md-chips and since we lack similar control, I want to at least have similar styles to be able to implement it as external component

[thatguyyoulove]

@ojosdegris I believe he is saying to use a <button> instead of a <span> for the close icon, however, you shouldn't place block elements inside of inline elements, so you should also need to change the .label-pill to a block element and position it accordingly (float, flex, etc.).

[patrickhlauke]

<button> is not a block-level element, though

[thatguyyoulove]

@patrickhlauke Bah, good call. Looks like I didn't have enough coffee today. Cheers.

[gijsbotje]

didn't bother with the js but this might be a simple css implementation
https://codepen.io/gijsbotje/pen/OjOmby
(same markup as the modal close)

[mdo]

Closing this out given we're scaling back the functionality and complexity of badges for now.