Flux

Appearance

Tag stack ​

The tag stack arranges tags horizontally with uniform spacing. It keeps lists of tags neat, scannable, and visually organized even when several are displayed together.

Open
Pending
Closed
Rejected

Slots

default
The tags that should be stacked.

Examples ​

Basic

A basic tag stack.

Open
Pending
Closed
Rejected

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxTagStack>
                <FluxTag
                    label="Open"/>

                <FluxTag
                    label="Pending"/>

                <FluxTag
                    label="Closed"/>

                <FluxTag
                    label="Rejected"/>
            </FluxTagStack>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Used component ​