Flux

Split button ​

The split button pairs one primary action with a menu of secondary actions. A common use case is a download button that offers additional download options.

The more button carries aria-haspopup="menu" and reflects the flyout state through aria-expanded. Setting disabled disables the more button and prevents the flyout from opening.

Required icons

ellipsis-h

Props

button-icon?: FluxIconName
The icon that is used for the more button.
Default: ellipsis-h

disabled?: boolean
Disables the split button. The more button is disabled and its flyout can no longer be opened.

flyout-direction?: FluxDirection
The direction of the flyout.

flyout-is-auto-width: boolean
If the flyout width should be the same as the opener.

flyout-margin?: number
The margin offset from the opener to the flyout.

flyout-width?: number | string
The width of the flyout.

Slots

button ({
    close(): void;
    open(): void;
    toggle(): void;
})
The button with the primary action.

flyout ({
    close(): void;
    readonly paneX: number;
    readonly paneY: number;
    readonly openerWidth: number;
    readonly openerHeight: number;
})
The content of the flyout.

Examples ​

Basic

A basic split button.

<template>
    <FluxSplitButton>
        <template #button>
            <FluxSecondaryButton
                label="Download"/>
        </template>

        <template #flyout>
            <FluxMenu>
                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="rectangle-sd"
                        label="Download in SD"/>

                    <FluxMenuItem
                        icon-leading="rectangle-hd"
                        label="Download in HD"/>
                </FluxMenuGroup>

                <FluxSeparator/>

                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="rectangle-4k"
                        label="Download in 4K"/>
                </FluxMenuGroup>
            </FluxMenu>
        </template>
    </FluxSplitButton>
</template>

<script
    setup
    lang="ts">
    import { FluxMenu, FluxMenuGroup, FluxMenuItem, FluxSecondaryButton, FluxSeparator, FluxSplitButton } from '@flux-ui/components';
</script>

Save options

A primary save button with secondary save variants.

<template>
    <FluxSplitButton>
        <template #button>
            <FluxSecondaryButton
                icon-leading="floppy-disk"
                label="Save"/>
        </template>

        <template #flyout="{close}">
            <FluxMenu>
                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="floppy-disk"
                        label="Save"
                        command="⌘S"
                        @click="close()"/>

                    <FluxMenuItem
                        icon-leading="copy"
                        label="Save as draft"
                        @click="close()"/>
                </FluxMenuGroup>

                <FluxSeparator/>

                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="paper-plane"
                        label="Save and publish"
                        @click="close()"/>
                </FluxMenuGroup>
            </FluxMenu>
        </template>
    </FluxSplitButton>
</template>

<script
    setup
    lang="ts">
    import { FluxMenu, FluxMenuGroup, FluxMenuItem, FluxSecondaryButton, FluxSeparator, FluxSplitButton } from '@flux-ui/components';
</script>

Disabled

Set disabled to disable the more button and prevent the flyout from opening.

<template>
    <FluxSplitButton
        disabled>
        <template #button>
            <FluxSecondaryButton
                disabled
                label="Download"/>
        </template>

        <template #flyout>
            <FluxMenu>
                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="rectangle-sd"
                        label="Download in SD"/>

                    <FluxMenuItem
                        icon-leading="rectangle-hd"
                        label="Download in HD"/>
                </FluxMenuGroup>
            </FluxMenu>
        </template>
    </FluxSplitButton>
</template>

<script
    setup
    lang="ts">
    import { FluxMenu, FluxMenuGroup, FluxMenuItem, FluxSecondaryButton, FluxSplitButton } from '@flux-ui/components';
</script>

Used components ​