Flux

Appearance

Split button ​

Split buttons are buttons that have one primary action and multiple secondary actions. A common usecase for this component is a download button with more options for that download.

Required icons

ellipsis-h

Props

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

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>
                <FluxMenuItem
                    icon-leading="rectangle-sd"
                    label="Download in SD"/>
                <FluxMenuItem
                    icon-leading="rectangle-hd"
                    label="Download in HD"/>

                <FluxSeparator/>

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

<script
    setup
    lang="ts">
    import { FluxMenu, 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>
                <FluxMenuItem
                    icon-leading="floppy-disk"
                    label="Save"
                    command="⌘S"
                    @click="close()"/>

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

                <FluxSeparator/>

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

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

Used components ​