Counters

Counters notify the user about an amount (1 to …) of notifications. These can be used in navigation or form elements.

Height

There are two heights available. When possible, use the biggest version.

Width

The minimum width of the counter equals its height. If there is not enough space to show the full number of notifications, a ‘+’-sign in combination with a tooltip is available. In other cases, the full content is shown.

Usage

When a counter is applied to an icon or visual, a 1px offset is visually separating the the two. In other cases, the counter is simply floating next to its parent.