Bootstrap: There's no button size that can be used with the default table

[Kuzmin]

It would be really nifty if we had something like the btn-xs in Bootstrap 3, since it allowed to easily add buttons to tables. I think it's a pretty common use case to have tables of data with "Edit", "Remove" etc. buttons at the right end of it.

This is how it looks with btn-sm, it's a bit too big.

[cvrebert]

.btn-xs was deliberately removed in v4 😢 . See #17029.
I agree, they were handy for high-density tables.

[ItsJonQ]

Hi hi :)

No pressure/rush. Just an open question!
Is there a chance btn-xs would be added back in?

In working in my own CSS projects, the goal/dream was to basically have 1 button size. However, I found that smaller buttons do have their places. The use cases are usually if:

1. UI / component is more compact/smaller (like the table row example)
2. Buttons are "less" primary compared to other actions, but still need to be distinct and visible

Github's current UI is a good example where more primary actions use their main button size. But secondary/tertiary buttons use a combination of color and sizing help with action hierarchy.

Hope this makes sense!

Thanks for reading :)

[legshooter]

I can't seem to find the reasoning behind this decision in any of the related issues. As already mentioned it's the only size that makes sense inside table cells.

[mdo]

We won't be restoring the .btn-xs class at this point. Right now, the ratios just don't make sense to try to work in given how small, default, and large buttons function in v4. You do have a few options though—change the vertical alignment to middle, customize button sizes yourself, change the table padding, etc.