Badge

Badges are used to prompt(show hint) a status change of a certain page or to show micro information about any content or product. Badges may also be accompanied by a sound, and may cause a badge to appear or update on the corresponding icon, image, text, inline in any layout.

Notification Badge

Usage
Anatomy
Specs

Notification badges are used to prompt(show hint) a status change of a certain page or content. They may also be accompanied by a sound, and may cause a badge to appear or update on the corresponding icon, image or text. They are used to prompt updates when a message has arrived,an event is about to occur, new data is available, or the status of something has changed. The number denotes the count of changed or new state, in case there is just one change in state or just to prompt the user the basic variant can be used instead of single or multi.

usage example image

States

example state image

Basic

example state image

Single Digit

example state image

Double Digit

Social Avatar Badge

Usage
Anatomy
Specs

Social avatar badges are used to show users from connected social network or GO-JEK network to show popularity of a listing or content. They are used in a variety of cases to show how popular an item, product or merchant is. They are mostly used on top of an image with an overlay gradient.

usage example image

States

example state image

Dark Background

example state image

Light Background

Ribbon Badge

Usage
Anatomy
Specs

Ribbon badges are used to show additional information about ongoing offers, promos and discounts in listings or inside layout, they are static and without states. They are used to drag attention towards ongoing offers, promos and discounts. They use high contrast background and shimmer animation so can be used in layout or as image overlays.

usage example image