Badge

The Badge component includes several variants: default (solid primary), secondary (muted background), destructive (for errors/warnings), outline (bordered), success (green), warning (yellow), and info (blue). Each variant is designed for specific use cases and semantic meaning.

Yes! Badges can include icons on the left or right side of the text. This is useful for adding visual context, such as a checkmark for verified status or a warning icon for alerts. Icons automatically size and align correctly.

Badges are perfect for status indicators. Use the appropriate variant (success for active/complete, warning for pending, destructive for error) and place them near the related content. They work great in tables, lists, and card headers.

While badges are typically non-interactive display elements, you can make them interactive by wrapping them in a button or link component. This is useful for filterable tags or dismissible labels.

Badges are simpler, non-interactive labels used primarily for status and categorization. Chips (if your design system includes them) are typically interactive elements with actions like remove or select. Badges focus on displaying information.

Yes, this Figma Badge component matches the shadcn/ui implementation exactly, including all variants, colors, and sizing options for perfect design-to-code consistency.