Flux

Description list ​

The Description list component displays a set of label/value pairs, such as the fields of a record in a detail panel. It renders as a semantic <dl> with an optional heading, an optional leading icon per row, and the value aligned to the trailing edge. Values can be plain text, or richer content such as a badge, a copy action, or a link.

Invoice Detail
Invoice Number
9087XY4521
Document Number
INV-FURN-9087XY
Status
Success
ETTN
7b90f6e2-9087-f...
Portal
View in portal

TIP

For a single icon and message, use Info instead. The description list is meant for multiple label/value pairs.

Props

direction?: "horizontal" | "vertical"
How the items flow. Use `vertical` to stack rows with the value aligned to the trailing edge, or `horizontal` to lay items out as columns separated by dividers.
Default: vertical

labelWidth?: number | string
The maximum width of the label column. Setting this switches the vertical layout to aligned columns, where the label column shrinks to fit the widest label and values are aligned to the leading edge. A number is interpreted as pixels. Only applies when `direction` is `vertical`; `is-stacked` on items has no effect in this layout.

title?: string
An optional heading shown above the list.

Slots

default
The label/value pairs, rendered as [Description item](./item) components.

header
Custom header content, replacing the title prop.

Examples ​

Account

A profile panel with labels, icons, and a status badge.

Account
Name
Bas Milius
Phone
+31 6 1234 5678
Location
Amsterdam, NL
Status
Active
Member since
March 2021 

<template>
    <FluxDescriptionList title="Account">
        <FluxDescriptionItem
            icon="user"
            label="Name">
            Bas Milius
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="phone"
            label="Phone">
            +31 6 1234 5678
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="location-dot"
            label="Location">
            Amsterdam, NL
        </FluxDescriptionItem>

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

        <FluxDescriptionItem
            icon="calendar"
            label="Member since">
            March 2021
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Order summary

An order panel with a copy action, a badge, and a stacked address.

Order summary
Order
#2024-0042
Payment
Paid
Shipping
Express
Total
€ 1,240.00
Delivery address
1600 Amphitheatre Parkway, Mountain View, CA 94043 

<template>
    <FluxDescriptionList title="Order summary">
        <FluxDescriptionItem
            icon="file-lines"
            label="Order">
            <FluxAction icon="copy"/>
            #2024-0042
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="circle-check"
            label="Payment">
            <FluxBadge
                color="success"
                label="Paid"/>
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="truck"
            label="Shipping">
            Express
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="money-bill"
            label="Total">
            € 1,240.00
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="location-dot"
            is-stacked
            label="Delivery address">
            1600 Amphitheatre Parkway, Mountain View, CA 94043
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Aligned labels

Values aligned to the leading edge next to a label column, using label-width.

Account
Name
Bas Milius
Phone
+31 6 1234 5678
Location
Amsterdam, NL
Status
Active
Member since
March 2021 

<template>
    <FluxDescriptionList
        title="Account"
        :label-width="180">
        <FluxDescriptionItem label="Name">
            Bas Milius
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Phone">
            +31 6 1234 5678
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Location">
            Amsterdam, NL
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Status">
            <FluxBadge
                color="success"
                label="Active"/>
        </FluxDescriptionItem>

        <FluxDescriptionItem label="Member since">
            March 2021
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Columns

Items laid out as columns separated by dividers, using direction="horizontal".

Company
Oracle Studios
Job Title
Product Manager
Revenue
$ 4,000 

<template>
    <FluxDescriptionList direction="horizontal">
        <FluxDescriptionItem
            icon="building"
            label="Company">
            Oracle Studios
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="user"
            label="Job Title">
            Product Manager
        </FluxDescriptionItem>

        <FluxDescriptionItem
            icon="money-bill"
            label="Revenue">
            $ 4,000
        </FluxDescriptionItem>
    </FluxDescriptionList>
</template>

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

Used components ​