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

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

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>

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 ​