Themes
Components/Components/es-counter
es-counter

A pill display of an number, that pulses on change. Caps out at 999.

Props

Name
Description
Type
Default
color

Choose the color variant of the counter

error
or
okay
or
warning
or
undefined
count

The number to display

number
0
size

The height of the counter that the rest of the dimensions scale from

number
24
variant

The display style of the counter.

filled
or
minimal
or
outline
filled

CSS Variables

Name
Description
--counter-background-color

The background color. Defaults to --foreground-color. Inverts the parent foreground / background relationship.

--counter-foreground-color

The foreground color. Defaults to --background-color. Inverts the parent foreground / background relationship.

--transition-duration

Duration of the pulse. Defaults to 300ms.