Flux

Appearance

Change ​

The change component displays a value indicator — typically used to show a trend or delta compared to a previous period. It supports a color and optional icon to convey direction at a glance.

TIP

This component is best used inside a KPI or Metric via the change prop.

Props

color?: FluxColor
The color of the change indicator.

icon?: FluxIconName
The icon shown at the start of the change indicator.

value: string | number
The value shown in the change indicator, typically a percentage or formatted number.

Examples ​

Positive

A positive change indicator with a trend-up icon.

<template>
    <FluxStatisticsChange
        color="success"
        icon="arrow-trend-up"
        value="+12.4%"/>
</template>

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

Negative

A negative change indicator with a trend-down icon.

<template>
    <FluxStatisticsChange
        color="danger"
        icon="arrow-trend-down"
        value="-3.7%"/>
</template>

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

Used components ​