---
alias: "fc.dashboard.threshold"
aliases:
  - fc.dashboard.threshold
category: content
module: Core
---
# fc.dashboard.threshold

Dashboard metric card with color-coded status thresholds (green/amber/red).

## When to Use
- Operations dashboard showing order counts, failure rates
- KPI tiles with alert thresholds
- Any metric that needs visual status indication

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `label` | string | No | Metric label text (supports templates) |
| `value` | string/number | No | Metric value (supports templates). Alternative: use `template` |
| `template` | string | No | Alternative to `value` -- template string for metric display. Source uses `value || template` |
| `subTitle` | string | No | Secondary label text below the main label (supports templates). Rendered in smaller, grey text |
| `thresholdLow` | number | No | Value above this triggers orange (#EE6F10) color |
| `thresholdHigh` | number | No | Value above this triggers red (#D23B3B) color |
| `link` | string | No | Click navigation URL (supports templates). Also accepts `link_template` (deprecated alias) |
| `width` | CardWidth | No | Card width (default: `quarter` / 3 on a 12-column grid) |

## Data Binding
`value`, `label`, `subTitle`, and `link` all support template strings from the page data context.

## Descendants
No.

## Composition Patterns
- Three `fc.column(third)` > `fc.dashboard.threshold` each for a 3-metric row
- Inside `fc.provider.graphql` for data-driven dashboards

## Gotchas
- **Default width is `quarter` (3)** -- not `full`. Tiles are designed to sit side by side in a row
- **Color thresholds**: green (#4CAF50) by default, orange (#EE6F10) when value > `thresholdLow`, red (#D23B3B) when value > `thresholdHigh`. The value is parsed as integer for comparison
- **"+" suffix on paginated data**: When `data.pageInfo.hasNextPage` is true, a `+` is appended to the displayed value (e.g., "1000+") to indicate there are more records than shown
- `value` and `template` are interchangeable -- the component uses `props.value || props.template`
- `link` and `link_template` are interchangeable -- `link_template` is the deprecated form

## Manifest Example
```json
{
  "component": "fc.dashboard.threshold",
  "props": {
    "label": "Failed Orders",
    "subTitle": "Last 24 hours",
    "value": "{{failedCount}}",
    "thresholdLow": 5,
    "thresholdHigh": 20,
    "link": "/orders?status=FAILED"
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
