Last updated: July 2017
An activity indicators shows a user that there is something new that requires their attention, in a section of the app they are not currently viewing.
In the tab bar, the indicator is a
8 wide by
4 high. It is placed at the bottom of the tab area, horizontally centred.
This is used to show the user there is something on a tab that wants their attention. It is a blue semi circle that will appear on the tab and will disappear when they have viewed or actioned that which required their attention.
The behaviour for iOS and Android is slightly different here. iOS has the blue underline which covers the notification indicator. On Android, it is still visible when you are on the tab that has the notification.
This is an alternative way of having the indicator. This is used when you want the customer to be reminded of something they have seen already.
Currently this is only used when there is an important site wide announcement that has been read, but is still active.
- In all situations outside the tab bar, the indicator is a
Redcircle or a rounded rectangle, depending on the number of digits in the activity count.
- If there is no number within the indicator, the circle is
- If there is a number within the indicator, the text is
Proxima Nova Condensed. The padding on all sides is
4. If there is a single digit, the indicator should be
15wide so it is a perfect circle.
- In a set of tabs, the indicator is
1above being vertically aligned within the tab’s label, and is
8to the right of the end of that label. The combined label + indicator should be horizontally centred within the tab.
- If the indicator overlaps any other item such as an icon, it has a 1px outer border the same color as the background, so it ‘cuts’ into the element it overlaps.
- Overlapping an icon, the indicator should be horizontally centred on the right hand edge of the icon, and vertically centred on the top edge.
- If it sits on a dark color, the indicator has a
Whiteouter border, regardless of whether it overlaps another element
- If it sits on a dark color AND overlaps another element like an icon, the indicator has a
Whiteouter border and then a further 1px outer border the same color as the background
- If it sits on top of a dark background which is not a solid color (e.g. photo), the indicator has a
These examples use a chat icon, but could be applied to any icon or other element