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>

Used components ​