# Battery

A cell outline with a terminal at one end, filled with lamp segments set into a recess, lit from the empty end. The lit segments are one lamp colour for the whole cell: green, amber below two fifths, red below a fifth. While it charges, the top lit segment breathes. The level is said in words too, so neither the colour nor the breathing is the only sign.

Kit part · With the Kit · https://tactileui.dev/parts/battery

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A recess with a bezel round it, so the outline shows on any plate, with a small cap on one end for the terminal. The segments are lamps drawn one to a child, concentric with the cell’s corner. The one that breathes is found by CSS alone: the lit segment with no lit segment after it. In the finishes that draw their lamps as square pixels or printed rings, the segments are drawn the same way.

## Variants

- Full
- Half
- Low
- Charging · the top segment breathes
- Small
- Ten segments
- Standing

## States

- Full
- Good
- Charging
- Empty

## Props and options

| Name | Kind | Description |
| - | - | - |
| batterySegments(level, n) · batteryState(level) · batteryWords(level, charging) | function | How many segments a level lights, its colour band, and its words for aria-valuetext. |

## Usage notes

Move the fader. Turn Charging on and the top lit segment breathes, and the words beside the cell say Charging. Reduced motion holds that segment still.

## Accessibility

- The level is a figure printed beside the cell as well, and a separate polite line says “Charging” or “Not charging” when that changes, since a change in a meter’s value text is not reliably spoken.
- The colour is never alone: the number of lit segments, the figure and the words all say the level, and “low” is in the words below a fifth.
- Under reduced motion it does not move, and the words still say Charging; the animation is a part of the state, not decoration, and it stops when the state does.
- It takes no focus. The cell has a bezel ring that shows its edge at 3:1 on any plate, in every finish.

## Related parts

- [Meter](https://tactileui.dev/parts/meter): A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too.
- [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.