Flux

Appearance

Button stack ​

The button stack arranges buttons along a chosen axis. Whether stacked vertically or aligned horizontally, it ensures clear spacing and visual balance between related actions.

Props

direction?: string
The direction in which the elements are stacked.
Default: horizontal

gap?: number
The gap between each button.
Default: 9

is-fill?: boolean
If the buttons should fill the available space.

Slots

default
The buttons that should be stacked.

Examples ​

Horizontal

A horizontal button stack.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxButtonStack>
                <FluxDestructiveButton
                    label="Delete"/>
                <FluxSecondaryButton
                    label="More info"/>
                <FluxSecondaryButton
                    label="Cancel"/>
                <FluxPrimaryButton
                    label="Save"/>
            </FluxButtonStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxButtonStack, FluxDestructiveButton, FluxPane, FluxPaneBody, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
</script>

Vertical

A vertical button stack.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxButtonStack
                direction="vertical">
                <FluxDestructiveButton
                    label="Delete"/>
                <FluxSecondaryButton
                    label="More info"/>
                <FluxSecondaryButton
                    label="Cancel"/>
                <FluxPrimaryButton
                    label="Save"/>
            </FluxButtonStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxButtonStack, FluxDestructiveButton, FluxPane, FluxPaneBody, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
</script>

Used components ​