Databox

Compact metric tile with a prominent value, supporting label, and optional trend.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`value`	`value`	Metric text when the `value` slot is empty. Unset values show an en dash (–).	`string`	`string`	`""`
`label`	`label`	Label text when the `label` slot is empty.	`string`	`string`	`""`

Slots

Name	Description
`value`	Primary metric (overrides `value`).
`label`	Supporting label (overrides `label`).
`trend`	Optional trend or status (e.g. `<duo-badge variant="success" pill>`).

Usage

Databox presents a single key metric on a raised surface: a large value, a supporting label, and an optional trend indicator. Named slots follow light-DOM order, so you can stack value over label or label over value without a layout prop.

Do

Use for dashboard tiles or summary grids that highlight one number or percentage.
Put the metric in the value slot (or attribute) and the name of the metric in label.
Leave value unset when the metric is unknown — Databox shows an en dash (–).
Compose trend with duo-badge (for example variant="success" and pill) so the change is text, not color alone.
Keep labels short so the tile stays scannable in a dense grid.

Don’t

Don’t use Databox for grouped content with body copy and actions — use Card.
Don’t use it for monetary amounts that need a currency suffix — use Price.
Don’t rely on the trend color alone; the badge (or other) label must still read clearly.

Slots

Name	Purpose
`value`	Primary metric; overrides the `value` attribute.
`label`	Supporting label; overrides the `label` attribute.
`trend`	Optional change or status, typically a Badge.

Slot order in markup is the visual order. Attribute-only content uses the Figma default: value, then label.