Figma Badges & Tags Component

Badges offer versatility with 6 distinct types: simple, dot, flag, avatar, icon+label, just icon the Pick dot property appears, allowing you to easily select an dot to accompany your badge.

Our badge component comes with 5 different color options: Red - Vibrant, urgent, high priority; Blue - Professional, friendly, trustworthy; Green - Natural, eco, healthy; Yellow - Warm, cheerful, energetic; Gray - Subtle, understated, neutral.

This palette was chosen to provide: A good range from bold to subtle tones; Standard primary colors like red, blue, green; Additional secondary colors for more variety; Colors fitting most branding needs; Visually distinct options for clear differentiation. The 5 colors allow flexibility to: Match your brand palette; Suit the context or content; Craft intentional hierarchies; Build visual connections. In summary, our thoughtful 5 color badge palette delivers versatile options to meet diverse branding and messaging needs.

Provides two distinct type, representing two different statuses. you can apply two styles to and badges. offering you flexibility in conveying essential information. There are two types of status badges as Stroke and Cancel. Our badge component comes with two status styles: Stroke badge - Outlined style for any badge. Cancel badge - Crossed-out style for cancelled statuses like Cancelled, Deleted, Removed.

Key differences: Stroke = Inactive status that may become active again; Cancel = Permanently cancelled or deleted status. Benefits: Clearly indicate temporary inactive vs permanent cancel; Visual styles match meaning of each status type, Consistent usage improves recognition, Flexible options for statuses needed in your product. In summary, the Stroke and Cancel badge types allow designers to represent two distinct status categories in a consistent, meaningful way. The styles visually communicate the status effectively.