MiniStat

molecules

Compact label + value row — 12px label on left, 14px/700 value on right, with 1px bottom border. Used in Ticket Sales Breakdown side card.

ARIA Role: group

Demo

Demo for MiniStat (molecules)

Compact label + value row — 12px label on left, 14px/700 value on right, with 1px bottom border. Used in Ticket Sales Breakdown side card.

Props

PropTypeRequiredDefaultDescription
labelstringYes—
valuestring | numberYes—
progressnumberNo—0-100, renders a ProgressBar component below the row

TypeScript Interface

interface MiniStatProps {
  label: string;
  value: string | number;
  progress?: number;
}

Assertions (NASA Rule 5)

  • [type]label and value required; progress must be 0-100(NASA Rule 5)
  • [aria]ProgressBar must be a separate <ProgressBar /> with role='progressbar'(WCAG 1.3.1)

Usage

Import

import { Ministat } from '@epasslive/design-system'

Basic

<Ministat />

With Variants

<Ministat variant="primary" size="md" />