Quill docs

Stat

A labeled key figure (label + value + optional trend), grouped so assistive tech reads it as one unit. The trend direction is carried in text and a glyph, never by color alone. Its axes are size and trend direction.

Preview#

A labeled key figure with an optional trend chip — size and trend-direction axes.

size

Monthly revenue$48,2508.2%

trend

Monthly revenue$48,2508.2%

Playground#

Change the controls — the preview and the snippet update live.

Monthly revenue$48,2508.2%

Size

Trend

Value

Stat::new("revenue", "Monthly revenue", "$48,250")
    .size(Size::Md)
    .trend("8.2%", Trend::Up)
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Monthly revenue$48,2508.2%

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Stat::new("revenue", "Monthly revenue", "$48,250")
            .size(Size::Md)
            .trend("8.2%", Trend::Up)
            .render()
    )

Code#

Construct the component with its builder:

Stat::new("revenue", "Monthly revenue", "$48,250")
    .size(Size::Md)
    .trend("8.2%", Trend::Up)
    .render()