MORE FRAMER COMPONENTS LIKE THIS
✦ Browse +38 FREE + 85 premium components: https://frameze.com/components
✦ Get everything for one price: https://ahmetloca.dub.link/allcomponents
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
MORE FRAMER COMPONENTS LIKE THIS
✦ Browse +38 FREE + 85 premium components: https://frameze.com/components
✦ Get everything for one price: https://ahmetloca.dub.link/allcomponents
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
