Appearance

Metric ​

Metrics are used to display a single piece of information, such as a number or a date, with an optional label. They can be used to display a variety of information, such as a balance, a date, a status, or a count.

Basic Usage ​

Standard
$12,345.50
Small size
2023-01-01
Teal Accent
$12,345.50
Orange Accent
$2,000.00
template
<Metric label="Standard" value="$12,345.50" />
<Metric label="Small size" value="2023-01-01" size="small" />
<Metric label="Teal Accent" value="$12,345.50" variant="accent" />
<Metric label="Orange Accent" value="$2,000.00" variant="accent" accent-color="orange-500" />

INFO

The value prop passed to Metric can be a string or a number but it will always be rendered as a string. Currently, there's no built-in formatting, so it will be rendered however you pass it.

Playground ​

Outstanding Balance
$332,224

Accent Variant ​

Metrics have an accent variant that can be used to highlight important information. You can also set the accent-color prop to change the color of the accent variant.

LightMainDark
Ice 100
$12,345.50
Purple 100
$12,345.50
Royal 100
$12,345.50
Blue 100
$12,345.50
Seafoam 100
$12,345.50
Teal 100
$12,345.50
Green 100
$12,345.50
Yellow 100
$12,345.50
Orange 100
$12,345.50
Red 100
$12,345.50
Ice 500
$12,345.50
Purple 500
$12,345.50
Royal 500
$12,345.50
Blue 500
$12,345.50
Seafoam 500
$12,345.50
Teal 500
$12,345.50
Green 500
$12,345.50
Yellow 500
$12,345.50
Orange 500
$12,345.50
Red 500
$12,345.50
Ice 700
$12,345.50
Purple 700
$12,345.50
Royal 700
$12,345.50
Blue 700
$12,345.50
Seafoam 700
$12,345.50
Teal 700
$12,345.50
Green 700
$12,345.50
Yellow 700
$12,345.50
Orange 700
$12,345.50
Red 700
$12,345.50
template
<Metric variant="accent" label="Ice" value="$12,345.50" accent-color="ice-500" />
<Metric variant="accent" label="Purple" value="$12,345.50" accent-color="purple-500" />
<Metric variant="accent" label="Royal" value="$12,345.50" accent-color="royal-500" />
<Metric variant="accent" label="Blue" value="$12,345.50" accent-color="blue-500" />
<Metric variant="accent" label="Seafoam" value="$12,345.50" accent-color="seafoam-500" />
<Metric variant="accent" label="Teal" value="$12,345.50" accent-color="teal-500" />
<Metric variant="accent" label="Green" value="$12,345.50" accent-color="green-500" />
<Metric variant="accent" label="Yellow" value="$12,345.50" accent-color="yellow-500" />
<Metric variant="accent" label="Orange" value="$12,345.50" accent-color="orange-500" />
<Metric variant="accent" label="Red" value="$12,345.50" accent-color="red-500" />

<Metric variant="accent" label="Ice 100" value="$12,345.50" accent-color="ice-100" />
<Metric variant="accent" label="Purple 100" value="$12,345.50" accent-color="purple-100" />
<Metric variant="accent" label="Royal 100" value="$12,345.50" accent-color="royal-100" />
<Metric variant="accent" label="Blue 100" value="$12,345.50" accent-color="blue-100" />
<Metric variant="accent" label="Seafoam 100" value="$12,345.50" accent-color="seafoam-100" />
<Metric variant="accent" label="Teal 100" value="$12,345.50" accent-color="teal-100" />
<Metric variant="accent" label="Green 100" value="$12,345.50" accent-color="green-100" />
<Metric variant="accent" label="Yellow 100" value="$12,345.50" accent-color="yellow-100" />
<Metric variant="accent" label="Orange 100" value="$12,345.50" accent-color="orange-100" />
<Metric variant="accent" label="Red 100" value="$12,345.50" accent-color="red-100" />

<Metric variant="accent" label="Ice 700" value="$12,345.50" accent-color="ice-700" />
<Metric variant="accent" label="Purple 700" value="$12,345.50" accent-color="purple-700" />
<Metric variant="accent" label="Royal 700" value="$12,345.50" accent-color="royal-700" />
<Metric variant="accent" label="Blue 700" value="$12,345.50" accent-color="blue-700" />
<Metric variant="accent" label="Seafoam 700" value="$12,345.50" accent-color="seafoam-700" />
<Metric variant="accent" label="Teal 700" value="$12,345.50" accent-color="teal-700" />
<Metric variant="accent" label="Green 700" value="$12,345.50" accent-color="green-700" />
<Metric variant="accent" label="Yellow 700" value="$12,345.50" accent-color="yellow-700" />
<Metric variant="accent" label="Orange 700" value="$12,345.50" accent-color="orange-700" />
<Metric variant="accent" label="Red 700" value="$12,345.50" accent-color="red-700" />

WARNING

The accent-color prop has no effect unless you set the variant prop to accent.

Sizes ​

You can control the size of the metric by setting the size prop to either small or standard (default).

Small ​

Product Name
Good Flower
Date
2023-01-01
Order Number
$12,345.50
Subtotal
$2,000.00
template
<Metric size="small" label="Product Name" value="Good Flower" />
<Metric size="small" label="Date" value="2023-01-01" size="small" />
<Metric size="small" label="Order Number" value="$12,345.50" variant="accent" />
<Metric size="small" label="Subtotal" value="$2,000.00" variant="accent" accent-color="orange-500" />

Standard ​

Product Name
Good Flower
Date
2023-01-01
Order Number
$12,345.50
Subtotal
$2,000.00
template
<Metric label="Product Name" value="Good Flower" />
<Metric label="Date" value="2023-01-01" size="small" />
<Metric label="Order Number" value="$12,345.50" variant="accent" />
<Metric label="Subtotal" value="$2,000.00" variant="accent" accent-color="orange-500" />

Secondary Slot ​

You can pass content to the secondary slot to display supplementary information like a date, status, hint text, or secondary label.

Product Name
Good Flower
Gummy
Date
2023-01-01
Delivered
template
<Metric label="Product Name" value="Good Flower">
  <template #secondary>
    Gummy
  </template>
</Metric>
<Metric label="Date" value="2023-01-01">
  <template #secondary>
    <Chip color="green">Delivered</Chip>
  </template>
</Metric>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.