Badge

The Badge component is a small, inline UI element used to highlight statuses, categories, or counts — such as “New”, “Beta”, or “8 unread”. It can be styled in various visual variants and optionally include icons or links.

Usage

1. Drag the Badge component onto the canvas.
2. Edit the text via the Component Properties panel.
3. Switch visual styles (e.g. Base, Secondary, Destructive, Outline) using Variant Mode.
4. Toggle icon visibility or add an icon via properties.
5. Make the badge linkable, if needed, by enabling the link option in the properties panel.

For count-specific use cases, such as notifications or cart items, use the separate Badge Number component — a simplified version that displays only a number.

This component is ideal for labeling, tagging, or drawing subtle attention to dynamic content.