MetricsLockup

The MetricsLockup component displays a single metric with an optional title, info tooltip, trend indicator, and description.

MetricsLockup displays a metric value prominently, with an optional title and tooltip for context, an optional trend icon to show direction of change, and a description label below the value.

Installation

npm install --save @godaddy/antares

Props

NameTypeDefault

title?string | undefined—

Title text displayed above the metric value.

titleInfo?ReactNode—

Tooltip content shown when the info icon is focused or hovered alongside the title. Has no effect if `title` is not also provided.

data?string | number | undefined—

The metric value to display. Accepts a plain number, a percentage (e.g. "42%"), or a currency amount (e.g. "$1,234.56").

description?string | undefined—

Descriptive text displayed below the metric value.

compact?boolean | undefinedfalse

When true, renders the metric value and description inline rather than stacked.

trend?"positive" | "negative" | "neutral" | undefined—

Indicates the direction of change for the metric. Renders a directional icon to the left of the description. Intended to be used alongside `description` to provide context (e.g. "up 3% vs. last month"). Has no effect if `description` is not provided.

display?"flex" | "inline-flex" | undefined'flex'

The display property for the flex container.

wrap?"wrap" | "nowrap" | "wrap-reverse" | undefined—

Whether to wrap items onto multiple lines.

as?(React.ElementType & "div") | undefined'div'

Polymorphic element type.

padding?Spacing | Spacing[] | undefined—

Padding on all sides. Accepts single value or array.

inlinePadding?Spacing | Spacing[] | undefined—

Padding on inline (horizontal) direction.

inlinePaddingStart?Spacing | undefined—

Padding on inline start (left in LTR).

inlinePaddingEnd?Spacing | undefined—

Padding on inline end (right in LTR).

blockPadding?Spacing | Spacing[] | undefined—

Padding on block (vertical) direction.

blockPaddingStart?Spacing | undefined—

Padding on block start (top).

blockPaddingEnd?Spacing | undefined—

Padding on block end (bottom).

elevation?"base" | "card" | "raised" | "overlay" | undefined—

Elevation levels for visual depth.

rounding?Rounding | undefined—

Rounding values for border radius.

alignSelf?

"center" | (string & {}) | "auto" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | undefined

—

In Flex/Grid layout. Cross-axis alignment within flex/grid container.

justifySelf?

"center" | (string & {}) | "auto" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "left" | "right" | undefined

—

In Flex/Grid layout. Main-axis alignment within flex/grid container.

order?string | number | undefined—

In Flex/Grid layout. Layout order within flex/grid container.

flex?string | number | undefined—

In Flex/Grid layout. Flex shorthand for grow, shrink, and basis.

flexGrow?string | number | undefined—

In Flex/Grid layout. How much the item will grow relative to siblings.

flexShrink?string | number | undefined—

In Flex/Grid layout. How much the item will shrink relative to siblings.

flexBasis?string | undefined—

In Flex/Grid layout. Initial main size before growing/shrinking.

gridArea?string | undefined—

In Flex/Grid layout. Named grid area for placement.

gridColumnStart?string | undefined—

In Flex/Grid layout. Grid column start line.

gridColumnEnd?string | undefined—

In Flex/Grid layout. Grid column end line.

gridRowStart?string | undefined—

In Flex/Grid layout. Grid row start line.

gridRowEnd?string | undefined—

In Flex/Grid layout. Grid row end line.

justifyContent?

"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined

—

The distribution of space around children along the main axis in flex or inline axis in grid

alignContent?

"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "space-around" | "space-between" | "space-evenly" | "baseline" | undefined

—

The distribution of space around children along the cross axis in flex or block axis in grid

justifyItems?"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "legacy" | undefined—

Defines the default justify-self for all children in a grid container.

alignItems?"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "baseline" | undefined—

Sets the align-self property for each child.

columnGap?Spacing | undefined—

The gap between columns.

rowGap?Spacing | undefined—

The gap between rows.

Hints at the type of data that might be entered by the user while editing the element or its contents

is?string | undefined—

Specify that a standard HTML element should behave like a defined custom built-in element

Examples

Basic Usage

A metric with a title, info tooltip, value, and description.

Total Revenue

$1,234.56

vs. last month

import { MetricsLockup, type MetricsLockupProps } from '@godaddy/antares';export function DefaultExample(props: Partial<MetricsLockupProps> = {}) {  return (    <MetricsLockup      title="Total Revenue"      titleInfo="The total revenue across all products for the selected period."      data="$1,234.56"      description="vs. last month"      {...props}    />  );}

With Trend

Use the trend prop to show a directional icon next to the description. Accepts 'positive', 'negative', or 'neutral'.

Conversion Rate

42%

+3.2% vs. last month

import { MetricsLockup } from '@godaddy/antares';export function WithTrendExample() {  return <MetricsLockup title="Conversion Rate" data="42%" description="+3.2% vs. last month" trend="positive" />;}

Compact

Use the compact prop to render the metric value and description inline rather than stacked.

Sessions

8,021

-12% vs. last week

import { MetricsLockup } from '@godaddy/antares';export function CompactExample() {  return <MetricsLockup title="Sessions" data="8,021" description="-12% vs. last week" trend="negative" compact />;}

Accessibility

Keyboard

Key	Description
Tab	Moves focus to the info trigger button and shows the tooltip
Escape	Closes the tooltip

ARIA

The info trigger button uses aria-label="More information" to describe its purpose.
The tooltip uses role="tooltip" and is associated with the info trigger via aria-describedby.
The info trigger has a minimum touch target of 44×44px, achieved via a CSS pseudo-element, to meet WCAG 2.5.5.

Best Practices

Keep tooltip content concise and informative.
The data prop accepts strings or numbers — format currency and percentages before passing them in.
titleInfo requires title to be set — the info icon is contextually tied to the title label. If title is absent, titleInfo has no effect.
trend is intended to accompany description to provide temporal context (e.g. "↑ +3% vs. last month"). A trend icon alone, with no description, leaves the direction unanchored ("up since when?"). If description is not provided, trend has no effect.

MetricsLockup

On this page