12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
11 : 17 : 37 : 01
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
Become a member
to unlock all features

    Compose Inline Elements with Ionic 4 Badge Component

    Chris GriffithChris Griffith

    Learn how to create and use the Ionic Badge component in your Ionic 4 application.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Ionic has a badge component that we can apply to our application. The component is simply ion-badge. This component is an inline element, meaning that we can compose it within other components.

    For example, we can add a badge component to our tab bar. Here's a default tab template. This is the base HTML that defines the three tab buttons. We'll add an ion-badge component within the ion-tab button component.

    We can set the color attribute to one of the predefined values, say secondary. Since I have ionic serve already running, once I save, my application will automatically recompile and reload. There. Now you can see the badge applied right within our tabs content.

    Ion-badges can also be used with list items. Switching back to the code and to the template for tab one, let's add an ion-badge to one of the list items. Saving. Returning back to our browser, we can now see the badge being shown.