Badges

Badges are visual indicator for numeric values such as tallies and scores. You may have seen it over icons or avatars to show online/offline status of user. They may also be used to show the number of notifications or messages.

Pill Badges are used when the info contained is a text. They are used to highlight small pieces of info for user or state.

Types of Badges in Ingredients

We at Ingredients know that you love choices. Sweat not! We've got you covered. Badges in Ingredients come in 3 main variants. They are:

• Badges over icons
• Badges over avatars
• Pill Badges for texts

Let's look at how these variations will look at your screen.

Badges over Icons

Badges over icons are to be used for representing a number over an icon mostly to represent the number of items pending. These badges should use bright colors to grab the user's attention.

4

99

1

2

7

            
                

                    
                    
                    
4
                
            
        

Badges on avatars

People want to know if their friends are online or not. That's what drives the internet. Seeing if they're online, offline or busy is a very important indicator especially in this post pandemic world. Online-green, Offline-gray, Busy-red, Away-orange