Badges Kit
Free
A forms component built for Framer. Live preview below — interact with it directly before you buy.
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.
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)
Best value
Get every component with All-Access — $129
Badges Kit and all 122 others, current and future.
Get All-Access
