Large Tag
Description
The Large Tag component is a versatile element designed to display prominent labels or tags with optional call-out text and customizable colors. It can be used to highlight important information or categorize content in a visually appealing way.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | The main 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. |
| callOut | string|boolean | false | Optional call-out text to be displayed before the main label. If provided, it will be shown in a larger font size. |
| icon | string|null | null | Optional icon to be displayed in the tag. This parameter is defined but not currently used in the component. |
| fullWidth | boolean | false | When set to true, the tag will expand to full width of its container. |
| attributes | array | [] | Additional HTML attributes to be applied to the tag container. |
| class | string | flex items-center gap-2 flex-[1_0_0] rounded-[36px] bg-{color} text-{color}-content p-4 | The base CSS classes applied to the tag. The {color} placeholder is replaced with the actual color value. |
Example
Large Tag
2
Large Tag
Large Tag
<x-uxlibrary.tags.large-tag label="Large Tag" />
<x-uxlibrary.tags.large-tag label="Large Tag" color="secondary" callOut="2" />
<x-uxlibrary.tags.large-tag label="Large Tag" color="beginly-blue" iconLeft="plus-small" iconRight="xmark-small" />
