Flux

Appearance

Badge stack ​

The badge stack arranges badges in a horizontal line with consistent spacing. It’s ideal for displaying multiple labels or status indicators side-by-side in a clean and compact manner.

Open
Pending
Closed
Rejected

Slots

default
The badges that should be stacked.

Examples ​

Basic

A basic badge stack.

Open
Pending
Closed
Rejected

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxBadgeStack>
                <FluxBadge
                    label="Open"/>
                <FluxBadge
                    label="Pending"/>
                <FluxBadge
                    label="Closed"/>
                <FluxBadge
                    label="Rejected"/>
            </FluxBadgeStack>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Used components ​