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.