Button Group as a wrapper

[Gildedter]

Summary

A button-group like component that contains three containers, the three containers accepts slots for a, button, or any custom element

Basic example

I'm currently using the default button group from here, component code:

<div class="inline-flex rounded-md shadow-sm" role="group">
  <FileInput
    id={"file"}
    label={"Import File"}
    {sheets}
    bind:value
    style={"py-3 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 active:z-10 active:ring-2 active:ring-blue-700 active:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:active:ring-blue-500 dark:active:text-white"}
  />
  <button
    type="button"
    class="py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
  >
    Edit
  </button>
  <button
    type="button"
    class="py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
  >
    Cancel
  </button>
</div>

where FileInput is a custom component, that has its own style (which can be turned off by passing an empty string) I also used the active pseudo class from tailwind since divs don't have a focus state

Motivation

Custom interactive controls grouping , in place of currently being limited to links

[shinokada]

Thank you for your suggestion. I can see that it makes more flexible in that way.

Something like this?

<ButtonGroup>
  <MyCustomButton />
  <ButtonItem />
  <ButtonItem />
</ButtonGroup>

[Gildedter]

Thank you for your suggestion. I can see that it makes more flexible in that way.

Something like this?

<ButtonGroup>
  <MyCustomButton />
  <ButtonItem />
  <ButtonItem />
</ButtonGroup>

Yup, where MyCustomButton can be any Svelte component (anchor tag, button, div, etc.), only thing that limits the default button group now is the number, which is 3, unless its looping the in between components

[shinokada]

I just updated to v0.16.0. Can you try it and let me know what you think.

Demo

npm i -D flowbite-svelte@latest

[shinokada]

Closing the issue. Please let me know more when you have an issue. Thank you for your suggestion!

[Gildedter]

How do I attach a click event on the button version? I've tried nesting a button inside my ButtonGroupItem and assigning a button click to that, but the event isn't triggering

[shinokada]

Hi,

I just added on:click to ButtonGroupItem. Please run npm i -D flowbite-svelte@latest and let me know.

[Gildedter]

all working now, thanks for the quick fix

[Gildedter]

Any chance to add a button type for the button wrapper? I'm nesting it inside a form tag, and need one of the buttons to be of type "submit"

[shinokada]

Do you want to add submit like this?

<ButtonGroup>
    <ButtonGroupItem>Default is button</ButtonGroupItem>
    <ButtonGroupItem type="submit">Submit</ButtonGroupItem>
</ButtonGroup>

[Gildedter]

Can you me an example? I need a bit more info about it. Currently ButtonGroupItem.svelte has the following:

<script lang="ts">
// variables here
</script>

{#if href}
  <a {href} class="{btnClass} {$$props.class}" on:click><slot /></a>
{:else}
  <button type="button" class="{btnClass} {$$props.class}" on:click>
      <slot />
  </button>
{/if}

Do you want to add submit like this?

<ButtonGroup>
  ...
  <ButtonGroupItem type="submit">Submit</ButtonGroupItem>
</ButtonGroup>

Yes, preferably with these types, where the initial/default type is a button for ease of use

[shinokada]

Ok, done. Please update it and let me know. v0.16.12.

[Gildedter]

Will do, thanks again

[Gildedter]

How to individually disable the ButtonGroupItem (both a and button versions if possible)?

[shinokada]

Can you update it again and add disable. Let me know.

[Gildedter]

I updated to 0.16.13 but disabled isn't working, I'll wait for the re-structuring before updating again

[shinokada]

Thanks. The new version is 0.17.1. You can update it and let me know. Please note the following. It's a breaking change for Sidebar components. If you are using Sidebar components, you need to restructure them. https://flowbite-svelte.com/sidebars

[Gildedter]

Mini visual glitch, having more than three buttons (I have 4 at the moment), the middle border doesn't display correctly (i.e. its missing), no line (border) between the 2nd and 3rd buttons, but other than that, all functions work

[shinokada]

Can you update to v0.17.3 and let me know.

[Gildedter]

All good, thanks as always

[Gildedter]

I tried attaching event modifiers, on the ButtonGroupItem like so:

<ButtonGroupItem
  disabled={!stop || !exists}
  on:click|preventDefault={handleStart}
  {btnClass}
  >Start</ButtonGroupItem
>

but I'm getting this error:

Event modifiers other than 'once' can only be used on DOM elements [svelte(invalid-event-modifier)]

All 4 of my ButtonGroupItem s are buttons, nested within a form tag

[shinokada]

ButtonGroupItem has on:click but ButtonGroup doesn't have it.

Do you have a good reason to add on:click to the ButtonGroup? Let me know.

[Gildedter]

Help the individual disable functionality vanished (I checked my node_modules), on:click still works though, I'm on "flowbite-svelte": "^0.18.5"

[shinokada]

Can you show me your code?

Can you update v0.18.6 and let me know.

[Gildedter]

Can you show me your code?

Can you update v0.18.6 and let me know.

working now, forgot to reply sorry