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

Try it »

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

Ionic 2 Badges Example

Attributes

Following Attributes can be used for badges-

AttributeTypeDescription
colorstringYou can use this to add predefined colors such as “primary”, “danger”.
modestringMode 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

Try it »

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

Ionic 2 change Badges color example