In list, badge + right button gets overlapped

Checkout this pen:

It’s a list of items with both button and badge: they get overlapped.

Is this a bug or am I doing something wrong?

Thanks for posting a CodePen when you asked for help!

Here’s a quick fix for it :

However, I’m not sure it’s a bug. I think it’s because you mixed button right with lists. It really should be icon-right. See the bottom of my list. You’ll see an icon only. If you remove my CSS class, all of your list items will break, but the icon one displays fine.

Actually not all icons will display fine with only icon-right: large icons will partially overlap badge.


(Yes, I just realized that codepen is useful and awesome!)

Good points. I’ve opened Issue # 826 :

1 Like

Okay so Adam has made a few updates.

However, as he notes, depending on what you put in a list item, it could be impossible to know exactly where they belong. So, you can adjust position similar to my first CodePen sample.

Okay, I got it.
Thank you for the help!