Ionic 3 - Badges

Badges are small UI elements that can be used to show bitesized information. This article takes a look at using Badges within your Ionic applications. No dependencies are required for this project.

New Project

As always, we'll be starting out with a new project:

# Create a new Ionic project
$ ionic start IonicBadges blank

# Navigate to directory
$ cd IonicBadges

Usage

Badges are often used as part of an ion-item, this means we can place an icon to the left with some contextual badge information to the right.

  <ion-item>
    <ion-icon color="primary" name="logo-facebook" item-start></ion-icon>
    Paul Halliday
    <ion-badge item-end>1,250</ion-badge>
  </ion-item>

With the above, our UI therefore looks like this:

You can customise your badge colour with the color attribute, so everything from primary, secondary, danger, and so on works here.