Activity indicators

Components

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.

Notification indicator

In the tab bar, the indicator is a Blue semicircle, 8 wide by 4 high. It is placed at the bottom of the tab area, horizontally centred.

Indicator on

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.

    Indicator on current tab

    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.

      Indicator inactive

      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.

        Everywhere else

        • In all situations outside the tab bar, the indicator is a Red circle 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 8 in diameter
        • If there is a number within the indicator, the text is 10 Proxima Nova Condensed. The padding on all sides is 4. If there is a single digit, the indicator should be 15 wide so it is a perfect circle.

        Tabs

        • In a set of tabs, the indicator is 1 above being vertically aligned within the tab’s label, and is 8 to the right of the end of that label. The combined label + indicator should be horizontally centred within the tab.

        No digits

        Single digit

        Two digits

        Three digits

        Headers and cards

        • 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 1 White outer 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 1 White outer 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 1 White outer border

        These examples use a chat icon, but could be applied to any icon or other element

        No digits

        Single digit

        Two digits

        Three digits