Small Tag
Description
The Small Tag component is a compact, versatile element designed to display labels or tags with optional icons on either side. It offers customizable colors and can be used to categorize content or highlight information in a visually appealing and space-efficient manner.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | "" | The text to be displayed in the tag. |
| color | string | warm-beige | The color scheme to be applied to the tag. This should correspond to a color defined in your Tailwind config. |
| iconLeft | string|null | null | Optional icon to be displayed on the left side of the tag text. This should be a valid icon name from your icon library. |
| iconRight | string|null | null | Optional icon to be displayed on the right side of the tag text. This should be a valid icon name from your icon library. |
| attributes | array | [] | Additional HTML attributes to be applied to the tag container. |
| class | string | flex justify-center items-center gap-1 self-stretch rounded-3xl bg-{color} text-{color}-content px-4 py-[11px] text-sm font-normal leading-[normal] | The base CSS classes applied to the tag. The {color} placeholder is replaced with the actual color value. |
Example
Small Tag
Small Tag
