Button sizing when in group

[bartcuijpers]

Describe the feature in detail (code, mocks, or screenshots encouraged)

It seems impossible to adjust the button sizing when they are grouped. It would be a nice additional feature.

What type of pull request would this be?

None

Provide relevant links or additional information.

No response

[endigo9740]

@bartcuijpers can you expand with an example. In most cases I'm aware of the group controls the sizing.

[endigo9740]

The requested example was not replied so I'm closing this due to inactivity. If an example is provided in the future I'm happy to reopen. But currently it's not clear what's being requested here.

[bartcuijpers]

Individual buttons can be sized using the btn-sm, btn-lg and btn-xl classes. These classes don't work when multiple buttons are grouped in a buttongroup. It would be nice to be able to size the entire button group, just like Bootstrap.

[campbelljlowman]

I second this request. I'm trying to make the "metropolitan" and "atlantic" buttons small, however it seems the 'btn-sm' class is overridden by the 'btn-group' class in the parent.

I can work around this by making the 'btn-sm' class important on the child button, however ideally it would work just by setting a button size class on either the button group or individual child buttons

[endigo9740]

@campbelljlowman thanks, this should be something we can support. I appreciate the detailed explanation.

[campbelljlowman]

While working with this I've noticed another behavior that I think could be considered a bug. If I have a button group and want to change the color of one of them to indicate it's been selected using a different variant class, it works, however if I hover over the highlighted button, the background color goes back to the button group color.

This is confusing when trying to change the color of the button to indicate it's been clicked, because the background will stay the previous color until the user moves their cursor off the button. I confirmed this is not the case with regular buttons. Not sure if this is the correct place to discuss

[endigo9740]

@campbelljlowman

While working with this I've noticed another behavior that I think could be considered a bug. If I have a button group and want to change the color of one of them to indicate it's been selected using a different variant class, it works, however if I hover over the highlighted button, the background color goes back to the button group color.

Right, we've seen this behavior before. The trick is to make sure to apply ! (important) to the style applied to the child element. This will resolve the issue.

<div class="btn-group variant-filled">
	<button>Months</button>
	<button class="!variant-filled-primary">Days</button>
	<button>Years</button>
</div>

This is somewhat related, but I'd also encourage you keep an eye out for this change in the new release next week. This resolves the disabled state for child buttons in a button group:

• Bugfix for btn-group disabled state #2160

[endigo9740]

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

• NEXT: Tailwind Plugin #2377