Stat
Present a labeled metric value with optional unit and semantic tone.
Usage Notes
- Use for data dashboards, metric overviews, and key indicator displays.
- Not suitable for long text (use
text) or interactive input (useinput). - Related components:
textfor text output,badgefor label status. - Stats are typically used inside a
gridorrow. - Use
toneonly for semantic state, not as an arbitrary style picker.
Tone variants
namespace: "doc_stat_tone_diff",
layout: {
"row:tones": {
"stat:info": {
label: "Info",
value: "42",
tone: "info"
},
"stat:success": {
label: "Success",
value: "98%",
tone: "success"
},
"stat:warning": {
label: "Warning",
value: "73",
tone: "warning"
},
"stat:danger": {
label: "Danger",
value: "5",
tone: "danger"
},
"stat:muted": {
label: "Muted",
value: "0",
tone: "muted"
}
}
}
}