> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/metric.md). # Metric ## 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
Introduction 101 [VIDEO]https://flow.avonnicomponents.com/tutorials/components/metric/introduction/files/jDnXP6rQhpGQuQBP3Nak
Building a Dynamic Map with reactive metrics/spaces/dHOej9Pd5IxJNGEJMZKW/pages/ycDXF0y2Fj6NpL8x9es3/files/fGfpFsbu4Ud6eBR9nsQW
Build a Reactive Metrics Dashboard using the Avonni Metric and Data Table [VIDEO]https://youtu.be/sRtkMi2Mmqg/files/SMVf10xg8Sh3yg1zOV5b
Build a user activity report/spaces/dHOej9Pd5IxJNGEJMZKW/pages/nc2JHlE7juCFClmf9jyN/files/QBhf0CiViJjzm5YPvCv5
*** ## 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 `%` symbol * **Percent 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 {% hint style="info" %} If "Show Trend Color" is activated, it overrides the related metric's styling settings. {% endhint %}
### 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](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the metric's content and its edges. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Background" %} Sets the metric's background. * **Color:** Set the background color. {% endtab %} {% tab title="Alignment" %} Controls how the metric content is aligned. * **Alignment:** Align the primary value and its label. * **Secondary Alignment:** Align the secondary value group. {% endtab %} {% tab title="Label" %} 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. {% endtab %} {% tab title="Description" %} 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. {% endtab %} {% tab title="Value" %} 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. {% endtab %} {% tab title="Prefix" %} Styles the prefix text shown before the value. * **Color:** Set the prefix text color. * **Font Size / Font Style / Font Weight:** Control the prefix typography. {% endtab %} {% tab title="Suffix" %} Styles the suffix text shown after the value. * **Color:** Set the suffix text color. * **Font Size / Font Style / Font Weight:** Control the suffix typography. {% endtab %} {% tab title="Secondary Value" %} Styles the secondary metric value. * **Color:** Set the secondary value text color. * **Font Size / Font Style / Font Weight:** Control the secondary value typography. {% endtab %} {% tab title="Secondary Prefix" %} 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. {% endtab %} {% tab title="Secondary Suffix" %} 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. {% endtab %} {% tab title="Trend" %} Sets the trend indicator colors for the primary value. * **Negative / Neutral / Positive Color:** Set the trend color for each direction. {% endtab %} {% tab title="Secondary Trend" %} 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. {% endtab %} {% tab title="Avatar" %} 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. {% endtab %} {% endtabs %} *** ## 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 | Output variable | Type | What it returns | | ---------------------------- | ------- | ------------------------------------------------------------------------------- | | **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/metric.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.