You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Ionic 3 - Badges

Paul Halliday
Paul Halliday

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.

Ionic

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!