Counter badge

Counter badge: contains a number announcing a number of new items.

Positioning:

Frequently positioned in a supertext or corner position, especially in combination with an icon button. Counter badge positioned like this is frequently round instead of pill shaped.
Frequently positioned as inline text, for example inside a header or navigation item.

Anatomy

container
display value
invisible description

States

Frequently this component is inside a link or a button. Hover and focus state should be considered.

API

max and value from <input type="number"> could apply here, to configure long number truncation.
For progressive enhancement, the original number, and perhaps server-side formatted number, should be the text content. The data for number formatting can be stored in attributes:
```
<example-counter-badge value="1234" max="1000">
  1,000+
<example-counter-badge>
```

Content Design

Content writers should be involved in determining the description of the counter badge.
Localisation of the description should be considered for localisation.
Internationalisation should be considered for the number formatting.

Accessibility

In some situations changes in the number should be announced to screen reader users, using aria-live="true" and aria-atomic="true".
The description of the counter badge should include the subject, so it will be part of the announcement. For example: "15 unread e-mails".

Example

Examples using <nih-counter-badge> and no attributes.

1

Example using number limiting attributes value and max:

4,242

Experiment

Counter badge inside a tab

Pull requests 37

Counter badge inside an application button

Counter badge inside a sidebar navigation item

Counter badge inside an icon button

CSS code for positioning a badge relative to an icon

.example-icon-button nih-counter-badge {

}
.example-icon {
  font-size: 60px;
}