Split button

[NLSurfMan]

My aim is to get a split button: a button with a default action, and should you want something more complicated, use a dropdown for more options.

I've tried emulating one using a flux:button in combination with a flux:dropdown (see example below), but it's not pretty:

<flux:button.group>
    <flux:button :href="route('thing.create')">Add Thing</flux:button>
    <flux:dropdown position="bottom" align="end">
        <flux:button icon="chevron-down"></flux:button>
        <flux:menu>
            <flux:menu.item :href="route('thing.import')" icon="arrow-down-tray">Import</flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</flux:button.group>

Would it be possible to have a split button that looks as awesome as the original button? Something like this (pseudocode)?

<flux:button.group variant="split">
    <flux:button :href="route('thing.create.default')">Add Thing</flux:button>
    <flux:button.options>
        <flux:button :href="route('thing.create.other-1')">Add Thing 1</flux:button>
        <flux:button :href="route('thing.create.other-2')">Add Thing 2</flux:button>
        <flux:button :href="route('thing.create.other-3')">Add Thing 3</flux:button>
    </flux:button.options>
</flux:button>

[robinmoisson]

EDIT: i'm using the same code as you but it renders nicely, what don't you like about it?

Here's an example code from my project:

<flux:button.group>
    <flux:button variant="primary" icon="arrow-down-tray" href="#" target="_blank">
        {{ __('Download Translation') }}
    </flux:button>
    <flux:dropdown position="bottom" align="end">
        <flux:button variant="primary" icon="chevron-down"></flux:button>
        <flux:menu>
            <flux:menu.item icon="arrow-down-tray" href="#" target="_blank">
                {{ __('Untranslated File') }}
            </flux:menu.item>
            <flux:menu.item icon="arrow-down-tray" href="#" target="_blank">
                {{ __('Untranslated OCR PDF') }}
            </flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</flux:button.group>

Which looks like this:

[NLSurfMan]

Thanks for the reply and the example. What I don't like about it that it is not a true list of buttons, but a menu. In my imagination, a splibutton shows a list of buttons.

What makes me uncomfortable is that the menu items have a padding around it, and when hovering, make them appear smaller than actual buttons, as seen here in the developer tool highlighted example:

So while writing this reply, I went back and gave it a try with overriding the menu/menuitem padding and came up with this:

As you can see, the mouseover effect now covers the whole menuitem, making it look like a proper button instead of a menu/line of text. Here's my code. Take note of the overridden padding on the flux:menu and flux:menu.item:

<flux:button.group>
    <flux:button variant="primary" :href="route('scores.create')">Add Score</flux:button>
    <flux:dropdown position="bottom" align="end">
        <flux:button variant="primary" icon="chevron-down"></flux:button>
        <flux:menu class="p-0!">
            <flux:menu.item :href="route('scores.import')" icon="arrow-down-tray" class="p-2.5!">Import</flux:menu.item>
            <flux:menu.item :href="route('scores.export')" icon="arrow-up-tray"  class="p-2.5!">Export</flux:menu.item>
        </flux:menu>
    </flux:dropdown>
</flux:button.group>

In all fairness, I've been looking at various example images, and most of them use menu items anyway. So maybe it's just me 😄

For now I think it's usable for me in this way, and doesn't really feel hackish, so I'll probably stick with this for the time being. And maybe for the sake of running with the defaults, return to using the menuitems 😄

Thanks for the reply and the inspiration. And apologies for the noise.

[robinmoisson]

I have to say I didn't notice the padding around the inner buttons in the dropdown... Your result looks good, thanks for sharing your thought process!