Holo Tag
The <holo-tag> component (chip) renders a compact label. Set removable to show a dismiss button that emits a holoRemove event — the consumer is responsible for removing the element from the DOM in response.
Live Previews
Section titled “Live Previews”Variants
Section titled “Variants”<holo-tag variant="info">Info</holo-tag>Removable
Section titled “Removable”Removable
<holo-tag variant="neutral" removable>Removable</holo-tag><script> document.querySelector('holo-tag').addEventListener('holoRemove', event => { event.target.remove(); });</script>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ---------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
| variant | variant | The semantic style variant of the tag. | "neutral" \| "success" \| "warning" \| "danger" \| "info" | "neutral" |
| removable | removable | If true, renders a dismiss button that emits holoRemove. | boolean | false |
| Slot Name | Description | | --------- | --------------------- | | (default) | The tag’s label text. |
Events
Section titled “Events”| Event | Description | Type |
| ------------ | --------------------------------------------- | ------------------- |
| holoRemove | Emitted when the dismiss button is activated. | CustomEvent<void> |