ButtonGroup Component

[sourcegr]

Hey there,

I needed a ButtonGroup Component (just the visual part) so I created this one, based purely on css.

It must contain Button elements.

ButtonGroup.svelte

<div class="button-group"><slot></slot></div>

<style>
   .button-group {font-size:0!important;}
   .button-group :global(
      button:first-child
   ){border-top-right-radius:0!important; border-bottom-right-radius:0!important}

   .button-group :global(
      button:last-child
   ){border-top-left-radius:0!important; border-bottom-left-radius:0!important}

   .button-group :global(
      button:not(:first-child):not(:last-child)
   ) {border-radius:0!important}
</style>

You can see it in action here

You are also more than welcome to use it in any way you see fit or include it in the lib, with or without modifications.

[vikignt]

Hi @sourcegr,
thanks a lot, I immediately found a feature in Safari, I have to reset the margin user agent stylesheet on the button. And I'll include it in the lib.

[sourcegr]

👍 btw, the popover is a very nice addition ;) It will come in handy!