---
alias: "fc.tile.metric"
aliases:
  - fc.tile.metric
category: content
module: Core
---
# fc.tile.metric

> **NOTE: `fc.tile.metric` is NOT a registered component in the Mystique core source.** It is not found in `ComponentRegistry.register()`. The closest match is `fc.dashboard.threshold` (registered as `ThresholdTile`), which provides identical functionality. Use `fc.dashboard.threshold` instead and simply omit `thresholdLow`/`thresholdHigh` for a simple metric tile without threshold coloring.

Simple KPI tile displaying a label and value. Equivalent to `fc.dashboard.threshold` with no threshold props set -- the tile renders green (#4CAF50) by default when thresholds are omitted.

## When to Use
- Use `fc.dashboard.threshold` instead -- this alias is not registered in core Mystique
- Simple count tiles (Orders Today, Pending Fulfilments) work by using `fc.dashboard.threshold` without threshold props

## Key Props
Same as `fc.dashboard.threshold` -- see that component for the full prop reference.

| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `label` | string | No | Metric label text (supports templates) |
| `value` | string/number | No | Metric value (supports templates) |
| `link` | string | No | Click navigation URL (supports templates) |
| `width` | CardWidth | No | Tile width (default: `quarter` / 3) |
| `variant` | `'large'` or `'small'` | No | Value font size: `large` = 54px center, `small` = 36px left (default: `large`) |
| `options` | TileOptions | No | Conditional styling based on value (see below) |

### Expression-Based Conditional Styling

Use `options.styles[]` to change tile text/icon color based on data values:

```json
{
  "options": {
    "styles": [
      {
        "expression": "{{gt orders.edges.length 10}}",
        "text": { "color": "error" }
      }
    ]
  }
}
```

When `expression` evaluates to truthy, the style is applied. This works on both `fc.tile.metric` and `fc.dashboard.threshold`.

## Data Binding
Value supports template strings.

## Descendants
No.

## Gotchas
- **Not a distinct component registration** -- `fc.tile.metric` does not appear in the Mystique core component registry. If a deployment uses this name, it may be registered via a custom plugin or extension. The standard approach is to use `fc.dashboard.threshold` without threshold props

## Validation Rules
P12 (CRITICAL -- both label and value required)

## Manifest Example
```json
{
  "component": "fc.dashboard.threshold",
  "props": { "label": "Orders Today", "value": "{{todayCount}}", "link": "/orders?created=today" }
}
```

## 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.
