Data component

Metric Card

Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.

28 props2 slots2 outputsTheme readyResponsive

Interactive playground

Configure Metric Card

Change any prop and inspect the server-rendered component immediately.

Live preview

Metric Card

sample-1

A polished default metric card for a modern application.

Metric Card

Component code

<MetricCard
  label="Metric Card"
  value="sample-1"
  description="A polished default metric card for a modern application."
  trendLabel="Metric Card"
  progressLabel="Metric Card"
  href="#metric-card-demo"
  actionLabel="Metric Card"
  align="start">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</MetricCard>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Operational KPI

Display one metric with a clear label, value, supporting description, and trend.

Live preview

Availability

99.9 %

Target service availability.

Stable 30 days

Component usage.wrn

<MetricCard
  label="Availability"
  value="99.9"
  description="Target service availability."
  icon="icon-[lucide--activity]"
  suffix="%"
  trend="Stable"
  trendLabel="30 days"
  trendDirection="positive"
  progressLabel="Metric Card"
  href="#status"
  actionLabel="Open status"
  color="success"
  align="start">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</MetricCard>

Compact

Progress metric

Add progress when a value is measured against a clear target.

Live preview

Profile completion

72 %

Complete the remaining account and security steps.

Account setup 72%

Compact example

Component usage.wrn

<MetricCard
  label="Profile completion"
  value="72"
  description="Complete the remaining account and security steps."
  icon="icon-[lucide--circle-user-round]"
  suffix="%"
  trendLabel="Compact example"
  progress="72"
  progressLabel="Account setup"
  href="#metric-card-demo"
  actionLabel="Compact example"
  size="sm"
  color="info"
  variant="soft"
  align="center">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</MetricCard>

Advanced

Selectable dashboard metric

Emit select and action events from interactive cards used in dashboards.

Live preview

Open complaints

Needs review

Cases waiting for review or assignment.

Advanced example

Component usage.wrn

<MetricCard
  label="Open complaints"
  value="38"
  description="Cases waiting for review or assignment."
  icon="icon-[lucide--inbox]"
  badge="Needs review"
  trendLabel="Advanced example"
  progressLabel="Advanced example"
  href="#queue"
  actionLabel="Review queue"
  selectable="true"
  size="lg"
  color="warning"
  variant="raised"
  hover="glow"
  align="end">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</MetricCard>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@selectFires when an item, option, card, or result is selected.

@actionFires when the component's primary or item action is activated.

Declarative handlers.wrn

<MetricCard
  @select='console.log(payload)'
  @action='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"MetricCard\"], [data-component=\"MetricCard\"]")

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`label`	string	`"Metric"`	No
`value`	string	`"0"`	No
`description`	string	`""`	No
`icon`	string	`""`	No
`iconStyle`	string	`"soft"`	No
`prefix`	string	`""`	No
`suffix`	string	`""`	No
`badge`	string	`""`	No
`trend`	string	`""`	No
`trendLabel`	string	`""`	No
`trendDirection`	string	`"neutral"`	No
`progress`	number	`-1`	No
`progressLabel`	string	`""`	No
`href`	string	`""`	No
`target`	string	`""`	No
`rel`	string	`""`	No
`external`	boolean	`false`	No
`actionLabel`	string	`""`	No
`actionIcon`	string	`""`	No
`showArrow`	boolean	`true`	No
`selectable`	boolean	`false`	No
`disabled`	boolean	`false`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`hover`	string	`"lift"`	No
`align`	string	`"left"`	No
`class`	string	`""`	No