Action stack

The action stack component is a horizontal container for action buttons with built-in keyboard navigation. It uses a focus zone to enable arrow key navigation between child elements, making it accessible for keyboard users.

Slots

default
The action buttons or other interactive elements to display.

Examples

Basic

A basic action stack.

Preview

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxActionStack>
                <FluxAction
                    icon="scissors"/>

                <FluxAction
                    icon="copy"/>

                <FluxAction
                    icon="paste"/>
            </FluxActionStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxActionStack, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components

• Stack