Flux

Description item ​

The Description item component represents a single label/value pair within a Description list. The label is rendered as a <dt> with an optional leading icon, and the value, provided through the default slot, as a <dd> aligned to the trailing edge.

Plan
Enterprise

Props

icon?: FluxIconName
An optional leading icon shown before the label.

is-stacked?: boolean
Stacks the label on top of the value instead of placing them side by side. Useful for long values within a vertical list.

label?: string
The label of the pair, rendered as the term (`<dt>`).

Slots

default
The value of the pair, rendered as the description (`<dd>`). May contain rich content such as a badge, a copy action, or a link.

label
Replaces the label prop with custom content.

Examples ​

Basic

A description item with an icon and a rich value.

Status
Active

<template>
    <FluxDescriptionList>
        <FluxDescriptionItem
            icon="circle-check"
            label="Status">
            <FluxBadge
                color="success"
                label="Active"/>
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Multiple pairs

A typical list of several term and value pairs.

Name
Bas Milius
Email
bas@example.com
Role
Engineer
Location
Amsterdam 

<template>
    <FluxDescriptionList>
        <FluxDescriptionItem label="Name">
            Bas Milius
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Email">
            bas@example.com
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Role">
            Engineer
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Location">
            Amsterdam
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

<script
    setup
    lang="ts">
    import { FluxDescriptionItem, FluxDescriptionList } from '@flux-ui/components';
</script>

Stacked

Use is-stacked to place the value below the label instead of beside it.

Delivery address
Herengracht 1, 1015 BA Amsterdam, The Netherlands 

<template>
    <FluxDescriptionList>
        <FluxDescriptionItem
            icon="location-dot"
            label="Delivery address"
            is-stacked>
            Herengracht 1, 1015 BA Amsterdam, The Netherlands
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

<script
    setup
    lang="ts">
    import { FluxDescriptionItem, FluxDescriptionList } from '@flux-ui/components';
</script>

Custom label

Use the label slot to render custom markup for the term.

Plan
Pro
Enterprise 

<template>
    <FluxDescriptionList>
        <FluxDescriptionItem>
            <template #label>
                Plan
                <FluxBadge
                    color="primary"
                    label="Pro"/>
            </template>

            Enterprise
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Used components ​