About Component
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
Demo Mode — live showcase grid across light & dark panels
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)
Blog & editorial sites (category and topic tags)
Portfolio & personal branding sites (skill, availability tags)
Job boards & directories (Remote, Full-time, Featured)
Event & conference websites (Live, Sold Out, Upcoming)
CRM & support tools (ticket priority, lead status)
Changelog & release notes pages (New, Fixed, Beta)
Keywords
Status badge, Framer badge component, badge UI kit, dismissible badge, animated badge, status indicator, tag component, label component, pill badge, badge with icon, custom badge colors, dark mode badge, SaaS status tags, Framer property controls, accessible badge component
About Component
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
Demo Mode — live showcase grid across light & dark panels
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)
Blog & editorial sites (category and topic tags)
Portfolio & personal branding sites (skill, availability tags)
Job boards & directories (Remote, Full-time, Featured)
Event & conference websites (Live, Sold Out, Upcoming)
CRM & support tools (ticket priority, lead status)
Changelog & release notes pages (New, Fixed, Beta)
Keywords
Status badge, Framer badge component, badge UI kit, dismissible badge, animated badge, status indicator, tag component, label component, pill badge, badge with icon, custom badge colors, dark mode badge, SaaS status tags, Framer property controls, accessible badge component
