/ 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


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

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

Paul Halliday

Developer Adocate at Doist. Author of Vue.js 2 Design Patterns and Best Practices. Course author with 22,000+ students.

Read More
Ionic 3 - Badges
Share this

Subscribe to Paul Halliday