Components
metric
Key metric with optional trend indicator.
Displays a key metric with label, value, and optional change/trend indicators.
Usage
With Trend
Properties
accepts contentaccepts children
Sizing
| Property | Type | Default |
|---|---|---|
:full | flag | - |
:fit | flag | - |
:fill | flag | - |
Dimensions
| Property | Type | Default |
|---|---|---|
:width | any | - |
:height | any | - |
Variants
| Property | Type | Default |
|---|---|---|
:primary | flag | - |
:secondary | flag | - |
:ghost | flag | - |
:danger | flag | - |
:success | flag | - |
:warning | flag | - |
:info | flag | - |
Input
| Property | Type | Default |
|---|---|---|
:value | any | - |
Content
| Property | Type | Default |
|---|---|---|
:label | string | - |
:change | any | - |
:trend | symbol | - |
Note: The content string can be used as an alternative to :label. For example, (metric "Revenue" :value "$1,234") is equivalent to (metric :label "Revenue" :value "$1,234").
Note: Variant flags apply color to the value text. For example, :success makes the value green, :danger makes it red.