---
title: "Badges Kit — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ahmet Loca · Sections. Badges Kit BadgesKit is a flexible, production-ready badge component for Framer, built for status indicators, tags, and labels across…"
canonical: "https://framer.elliotli.dev/component/badges-kit"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Badges Kit

# Badges Kit

Custom status badges for Framer UI

[View on Framer](https://framer.com/marketplace/components/badges-kit/?via=elliot-li)

![Badges Kit preview image 1](https://framer.elliotli.dev/og/component/badges-kit/cb1a37b2ff2cdcca/1600x1200.jpg)

## Summary

Badges Kit BadgesKit is a flexible, production-ready badge component for Framer, built for status indicators, tags, and labels across dashboards, SaaS products, and marketing…

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Get everything for one price:** [**https://ahmetloca.dub.link/allcomponents**](https://ahmetloca.dub.link/allcomponents)

## **About Badges Kit**

**BadgesKit** is a flexible, production-ready badge component for Framer, built for status indicators, tags, and labels across dashboards, SaaS products, and marketing sites. Choose from 9 built-in tones, 3 sizes, and both light & dark themes, or define fully custom colors to match your brand. Each badge supports icons (check, cross, minus, dot, animated spinner, or any custom emoji/symbol) and can be made dismissible with a smooth exit animation. A built-in Demo Mode showcases every tone and icon combination side-by-side in light and dark panels — perfect for picking the right style at a glance.

**Key Features**

-   9 built-in tones: neutral, success, error, warning, info, purple, orange, indigo
    
-   Custom color mode — set your own background, text, and border
    
-   Light & dark theme support, switchable per instance
    
-   3 sizes: small, medium, large
    
-   6 icon types: check, cross, minus, dot, animated spinner, custom emoji
    
-   Closable badges with smooth fade-and-scale dismiss animation
    
-   Full font control: family, weight, style, and variation settings
    

**Use Cases**

-   SaaS dashboards(status, plan, subscription tags)
    
-   E-commerce order & payment status indicators (Paid, Shipped, Refunded)
    
-   Product showcase & feature comparison sections
    
-   Pricing pages (Popular, New, Limited Offer tags)
    
-   Portfolio & personal branding sites (skill, availability tags)
    
-   Event & conference websites (Live, Sold Out, Upcoming)
    
-   CRM & support tools (ticket priority, lead status)
    

**Keywords**

Status badge, badge component, badge UI kit, dismissible badge, animated badge, status indicator, tag component, label component

## Rank history [How rankings work →](/terms#rankings)

-   All · #3900

## Details

- **Author**: Ahmet Loca
- **Price**: $5.00
- **Published**: 2026-06-26
- **Updated**: 2026-09-30
- **Added**: 2026-06-26
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes