Ecommerce Badges
Bold product label system for shops and marketplaces — promotional tags, availability states, shipping offers, quality certifications, and pricing labels.
When to Use
Ideal for product cards, listing pages, cart items, and any commerce interface needing prominent product status communication.
Best Practices
Limit promotional badges to 1-2 per product card to avoid visual overload. Use SALE and HOT together sparingly — they compete for attention.
Why This Component Matters
Product labels are conversion drivers. A well-placed SALE or Best Seller badge directly influences purchase decisions and time-on-page metrics.
FAQ
QAre these dark-themed only?
Yes, by design — the dark theme makes the vivid colored labels pop with maximum contrast.
QCan I add a percentage to the SALE badge?
Yes — extend the badge to accept a value prop and render it inline, e.g. SALE · 30% OFF.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.