The Badge pattern allows users to be informed about events that occur, associated with an application. Badges highlight recent activity by visually marking new content. There are several implementations of this pattern. For example, placing a numbered badge on the label was popularized by iOS but can be seen in many other apps now such as LinkedIn, Facebook or Quora. Twitter does this as well for the notifications button but also has a small dot on top of the timeline icon to indicate new activity in a more subtle way. Another way to display notifications is with a banner that drops down within the app to show new activity. The Facebook app does this as well, showing a small popup when there are new items in the newsfeed.These events may include: new messages, calendar events, data updates, status changes, etc.

There are two variations of badges described in this pattern:


Appearance characteristics for this pattern.


Common behaviors for this pattern.


Usage guidelines for this pattern.



Fig 1. List View & Nav Bar


App Icon

Fig 2. App Icon



Fig 3. Dock



Fig 4. 3D Touch Peek