Badges represent statuses, events, categories, content tags, and notifications. Badges typically comprise of text or numerical values, iconography, and identifying colors. Badges can be placed in almost any user interface but they are commonly seen in tables, cards, lists, filters, messaging, and media content.
Below are considerations on how to design badges better.
Avoid long descriptions
Distinguish badges from button styles
Consider limiting notification badge numbers to two digits
Contrast > color
Don’t use badges as headers or key indicators
Don’t combine different sized badges next to each other
I aim to design, code, and write about UI components and patterns for enterprise SaaS. I’m creating a product that allows software designers and engineers to plug into a comprehensive set of UI components to build amazing interfaces. Stay tuned!
If you’re interested, sign up to stay informed on my progress.