Metric
The Avonni Metric displays numerical values with labels to provide context for key metrics and performance indicators
Overview
The Avonni Metric displays a key number (or date) with an optional label, description, avatar, prefix/suffix, and secondary value. Use it to surface KPIs, aggregated totals, or any single-value insight directly on a Flow screen.
Tutorials
Configuration
To configure it, click the component on the Flow screen. The Edit Metric Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label — text displayed above the metric value. When set, it appears above the data by default.
Description — brief text displayed below the metric value to provide additional context.
Avatar
Display an avatar near the metric value. Configure the avatar's image source, initials, icon, size, variant, and position (Left, Right, Bottom, or Top).
Primary Metric
Configure the main number (or date) displayed prominently in the component.
Format Style — determines whether the value is displayed as a number or a date, and how it is formatted:
Decimal — standard number formatting
Percent — appends a
%symbolPercent Fixed — percent value where 0.5 = 50% (fixed-point)
Currency — formats as a currency amount; configure Currency Code (e.g., USD) and Currency Display As (Symbol, Code, or Name)
Date — formats as a date; use the date/time formatting options below
Value — static number to display. Cannot be combined with Value Query, Date Value, or Date Value Query.
Value Query — query to fetch the primary value via an aggregate function (SUM, COUNT, AVG, MIN, MAX). The result of the aggregation is displayed as the metric value. Cannot be combined with Value.
Prefix — text displayed before the main value.
Suffix — text displayed after the main value.
Tooltip — text shown when the user hovers over the main value.
Value Sign — controls sign display behavior: Negative Only (default) or Positive and Negative.
Show Trend Color — when enabled, the main value changes color based on its relationship to the Trend Breakpoint Value.
Trend Breakpoint Value — the threshold considered neutral for trend evaluation.
Trend Icon — icon style used to indicate trend direction: Dynamic (arrow that flips direction), Arrow, or Caret.
Date formatting options (when Format Style is Date):
Day, Month, Year, Weekday, Era, Second, Minute, Hour, Hour 12, Timezone, Timezone Name
If "Show Trend Color" is activated, it overrides the related metric's styling settings. 
Secondary Metric
Display a second value alongside the primary metric. The secondary metric has the same formatting options as the primary (Format Style, Value, Value Query, Date Value, Prefix, Suffix, Position, Value Sign, Show Trend Color, Trend Breakpoint Value, Trend Icon, and date formatting).
Position — where the secondary value appears relative to the main value: Bottom, Left, Right, or Top.
Interactions
Interactions define what happens when users interact with the Metric. Configure them from the Interactions tab of the Edit Metric panel.
Primary Metric Click
Fires when the user clicks the primary metric value. Use this to navigate to a page, open a flow, or trigger any downstream interaction.
Secondary Metric Click
Fires when the user clicks the secondary metric value. Use this to drive navigation or conditional logic based on the secondary value.
Styling
The Style tab gives you fine-grained control over the Metric's appearance. Configure it from the Style tab of the Edit Metric panel.
Controls the outer spacing around the metric, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the metric's content and its edges.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the metric's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the metric.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Sets the metric's background.
Color: Set the background color.
Controls how the metric content is aligned.
Alignment: Align the primary value and its label.
Secondary Alignment: Align the secondary value group.
Styles the label text displayed alongside the data.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Line Clamp: Limit the label to a maximum number of lines.
Styles the additional description text.
Color: Set the description text color.
Font Size / Font Style / Font Weight: Control the description typography.
Line Clamp: Limit the description to a maximum number of lines.
Styles the main metric value.
Color: Set the value text color.
Font Size / Font Style / Font Weight: Control the value typography.
Line Height: Set the line height of the value.
Styles the prefix text shown before the value.
Color: Set the prefix text color.
Font Size / Font Style / Font Weight: Control the prefix typography.
Styles the suffix text shown after the value.
Color: Set the suffix text color.
Font Size / Font Style / Font Weight: Control the suffix typography.
Styles the secondary metric value.
Color: Set the secondary value text color.
Font Size / Font Style / Font Weight: Control the secondary value typography.
Styles the prefix text shown before the secondary value.
Color: Set the secondary prefix text color.
Font Size / Font Style / Font Weight: Control the secondary prefix typography.
Styles the suffix text shown after the secondary value.
Color: Set the secondary suffix text color.
Font Size / Font Style / Font Weight: Control the secondary suffix typography.
Sets the trend indicator colors for the primary value.
Negative / Neutral / Positive Color: Set the trend color for each direction.
Sets the trend indicator styling for the secondary value.
Negative / Neutral / Positive Color: Set the secondary trend text color for each direction.
Negative / Neutral / Positive Background Color: Set the secondary trend background color for each direction.
Negative / Neutral / Positive Radius: Set the corner radius of the secondary trend badge for each direction.
Styles the optional avatar shown with the metric.
Icon Background Color / Icon Foreground Color: Set the fallback icon colors.
Initials Color / Initials Color Hover / Initials Font Weight: Style the avatar initials.
Border Color / Border Style / Border Size / Border Radius: Customize the avatar border.
Vertical Alignment: Align the avatar relative to the content.
Output Variables
The Metric exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Metric component, and pick the output variable you need.
Metric Clicks
Primary Metric Clicked
Boolean
true when the user clicked the primary metric value during the screen step.
Secondary Metric Clicked
Boolean
true when the user clicked the secondary metric value during the screen step.
Example: Show a details panel on the next screen only when the user clicked the primary value — add a Decision element that checks Primary Metric Clicked equals
true.
Flow Interaction Output Variables
Like all interactive Flow components, the Metric exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?