BaseCount

Mostra uma quantidade ao lado de um item de menu, aba ou filtro.

77 medições abertas4242 contratos99+120 aditivos

Uso

• Só número, sem texto dentro do contador. O que ele conta vem do item ao lado: "Em atraso 5".
• Acima de max (99, se não passar outro), o contador mostra "99+". O leitor de tela ouve o número real.
• Quando o contador fica sozinho e nada perto diz o que ele conta, passe label: o leitor de tela ouve "7 medições abertas".
• Para a situação de um item, use o BaseBadge; para um atributo, o BaseTag.

Em filtros e abas

Dentro de um botão ou link, o número entra no nome acessível: "Em atraso 5". Não passe label nesse caso, para o nome não repetir o que o item já diz.

Deixe um espaço antes do contador: Contratos <BaseCount :value="42" />. Sem ele, o nome acessível junta a palavra e o número em "Contratos42", porque o contador é um elemento em linha e não acrescenta espaço ao nome.

Limite

9999+1009+12999+1.500

Estilo

Propriedade	Token
Fundo	--tj-layer-accent-01
Texto	--tj-text-secondary, algarismos tabulares
Fonte	--tj-text-xs, peso --tj-weight-semibold
Raio	--tj-radius-pill
Altura	20 px, largura mínima 20 px, recuo de 6 px

Componentes que usam o contador, como o controle segmentado e o menu lateral, ajustam fundo e altura nas próprias folhas de estilo.

Código

<BaseCount :value="openMeasurements" label="medições abertas" />
<a href="/contratos?atraso">Em atraso <BaseCount :value="5" /></a>

Propriedade	Tipo	Padrão	Descrição
value	number	0	Quantidade mostrada
max	number	99	Acima dele, mostra max+
label	string	—	O que é contado; o leitor de tela ouve o número junto com ele

O número usa o separador de milhar brasileiro: 1.500. Valores inválidos vindos da API viram número inteiro não negativo: NaN e negativos mostram 0, e frações são arredondadas.

Acessibilidade

• O contador é texto comum, sem papel nem aria-label próprios. Um aria-label num <span> sem papel é proibido pela especificação ARIA 1.2 e vários leitores de tela o ignoram. Por isso, quando o texto falado é diferente do visível (com label ou acima de max), o número visível fica escondido do leitor de tela e um texto oculto na tela diz "120 contratos".
• Sem label e dentro do limite, o leitor de tela lê só o número, que entra no nome do botão, link ou aba em volta.
• Se o número muda enquanto a pessoa está na tela, avise com uma região aria-live na tela, não no contador.
• No modo de alto contraste do Windows, o contador ganha uma borda para continuar visível.
• Testado com axe sozinho, com label, acima do limite e dentro de um botão.