EccUtilsDesignBadge Component
2.0.0-alpha.6
<ecc-utils-design-badge/>
EccUtilsDesignBadge
Overview
The ecc-utils-design-badge component is a simple, customizable badge for displaying statuses, counts, or labels. It provides several visual variants and sizes to suit different contexts.
This component is built with Lit and Tailwind CSS, ensuring it is lightweight and easily stylable.
Usage
Badge Variants
This example shows the different visual styles of the badge.
Badge Sizes
This example demonstrates the different sizes available for the badge.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | The visual style of the badge. |
size | "sm" | "md" | "lg" | "md" | The size of the badge. |
variant
Controls the visual style of the badge, which is useful for conveying status or intent.
<EccUtilsDesignBadge variant="destructive">Error</EccUtilsDesignBadge>size
Determines the size of the badge, affecting its padding and font size.
<EccUtilsDesignBadge size="lg">Large Badge</EccUtilsDesignBadge>Events
This component does not emit any custom events.
