Tutorialsplane

Ionic 2 Badges


Ionic 2 Badges: Badges are basically numerical representaion of message that needs to be conveyed to the user. It is very easy to create Badges in Ionic 2. Here in this tutorial we are going to explain how you can create badges in Ionic 2 Framework. You can also use online editor to see the output of the example.


Ionic 2 Badges Example

You can create badge simply using ion-badge tag as in example below –

Ionic 2 Badges Example

<ion-item>
  <ion-icon name="thumbs-up" item-left=""></ion-icon>
  Likes
  <ion-badge item-right="">50K</ion-badge>
</ion-item>

Try it »

If you run the above example it will produce output something like this –

Attributes

Following Attributes can be used for badges-

Attribute Type Description
color string You can use this to add predefined colors such as “primary”, “danger”.
mode string Mode to apply to this component.

Learn More About Badges

Let us have some More example and demo about the Badges.


Change Badge Color

Some times we need to change the badge color, you can change color using color attribute simply as below –

Ionic 2 Change Badges Color Example

<ion-item>
  <ion-icon name="thumbs-up" item-left=""></ion-icon>
  Likes
  <ion-badge color="danger" item-right="">50K</ion-badge>
</ion-item>

Try it »

If you run the above example it will produce output something like this –

Learn Ionic

Components

Ionic 2 Native