Flux

Appearance

Legend item ​

A single entry in a Legend, consisting of a color swatch or icon, a label, and an optional value.

Revenue€ 48,290
Orders3,821

TIP

This component is best used within a Legend.

Props

label: string
The label of the legend item.

color?: FluxColor | `#${string}`
The color swatch of the legend item. Accepts a FluxColor or a custom hex color.

icon?: FluxIconName
An icon shown instead of the color swatch.

value?: string | number
An optional value shown to the right of the label.

Snippet ​

vue
<template>
    <Preview>
        <FluxStatisticsLegend>
            <FluxStatisticsLegendItem
                color="primary"
                label="Revenue"
                value="€ 48,290"/>
            <FluxStatisticsLegendItem
                icon="cart-shopping"
                label="Orders"
                value="3,821"/>
        </FluxStatisticsLegend>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsLegend, FluxStatisticsLegendItem } from '@flux-ui/statistics';
</script>

Used components ​