/ ionic

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:

Ionic 3 - Badge

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

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More