Design better badges

Learn badge user interface best practices

This article covers badge design considerations in user interfaces. I published the file I created to illustrate the examples in this article to the Figma Community.

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

Keep badge content to one or two words.

Distinguish badges from button styles

Badges can be confused with buttons when they are styled in a similar manner.

Consider limiting notification badge numbers to two digits

When a user receives notifications in excess of 99, consider truncating it to display “99+”.

Contrast > color

Make sure badges are easy to read, have enough contrast, and don’t rely on colors alone.

Don’t use badges as headers or key indicators

Badges should be secondary and supportive to the content they represent.

Don’t combine different sized badges next to each other

Badge size should be the same when presented next to each other. Differentiate with color and iconography instead of size differences.

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.

Forms and Tables