Flux

Legend item ​

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

TIP

This component is best used within a Legend.

INFO

The item exposes the ARIA listitem role and is keyboard focusable. Within a Legend it is reached through the legend's single tab stop and arrow-key navigation. Its tab order is managed automatically, so you do not set tabindex yourself. Focusing an item triggers the same hover synchronization as the mouse, highlighting the matching series in the linked visualization.

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 ​