Components · Tactical
BatteryIndicator
A battery readout that communicates charge three ways at once: fill width, the exact percentage, and a text state (CRIT to FULL). The read survives in Mono and NVG, and the charging pulse respects reduced motion.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
72%HIGH
18%CHG
8%CRIT
72%HIGH
18%CHG
8%CRIT
72%HIGH
18%CHG
8%CRIT
Variants & states
- level: critical / low / medium / high / full
- charging
Tokens used
--semantic-color-status-nominal--semantic-color-status-caution--semantic-color-status-critical--semantic-color-surface-input
Copy-paste
import { BatteryIndicator } from 'operator-components';
<BatteryIndicator level={72} />
<BatteryIndicator level={18} charging />Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)