Use the CounterLabel component to add a count to navigational elements and buttons.

Default example

<CounterLabel mx={1}>12</CounterLabel>
<CounterLabel mx={1} scheme='grayDarker'>13</CounterLabel>
<CounterLabel mx={1} scheme={'grayLight'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'dark'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'light'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'purple'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'blue'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'pending'}>13</CounterLabel>
<CounterLabel mx={1} scheme={'success'}>13</CounterLabel>

System props

CounterLabel components get BACKGROUND and COMMON system props along those defined by its base component LABEL. Read the System Props doc page for a full list of available props.

Component props

schemeStringsets the counter label to a pre-defined scheme, e.g. disabled, error, pending, success, warning For a complete list of scheme options, see the theme's colorStyles dictionary