The <luna-tag> component displays label tags with variants, sizes, and removable functionality.
Paths
/lunadom/components/tag/tag.js REQUIRED
Basic States
Standard
Pill Shape
Removable
Disabled
🔥
With Icon
Sizes
Small
Medium
Large
SM Pill
MD Pill
LG Pill
Color Variants
Neutral
Primary
Success
Warning
Danger
Removable Blue
Critical Pill
Customization
Slots
default - The content of the tag.
prefix - Content to display before the label.
Attributes
size - The size of the tag. Defaults to 'md'.
pill - If present, the tag will have a pill shape.
removable - If present, adds a close button to the tag.
disabled - Whether the tag's remove button is disabled.
variant - The visual style of the tag. Defaults to 'neutral'.
CSS Variables
--luna-tag-bg - Background color of the tag.
--luna-tag-color - Text color of the tag.
--luna-tag-border - Border color of the tag.
Events
luna-remove - Emitted when the remove button is clicked.
Example Code
<!-- Basic States -->
<luna-tag>Standard</luna-tag>
<luna-tag pill>Pill Shape</luna-tag>
<luna-tag removable>Removable</luna-tag>
<luna-tag disabled>Disabled</luna-tag>
<luna-tag>
<span slot="prefix">🔥</span>
With Icon
</luna-tag>
<!-- Sizes -->
<luna-tag size="sm">Small</luna-tag>
<luna-tag size="md">Medium</luna-tag>
<luna-tag size="lg">Large</luna-tag>
<luna-tag size="sm" pill removable>SM Pill</luna-tag>
<luna-tag size="md" pill removable>MD Pill</luna-tag>
<luna-tag size="lg" pill removable>LG Pill</luna-tag>
<!-- Color Variants -->
<luna-tag variant="neutral">Neutral</luna-tag>
<luna-tag variant="primary">Primary</luna-tag>
<luna-tag variant="success">Success</luna-tag>
<luna-tag variant="warning">Warning</luna-tag>
<luna-tag variant="danger">Danger</luna-tag>
<luna-tag variant="primary" removable>Removable Blue</luna-tag>
<luna-tag variant="danger" pill>Critical Pill</luna-tag>