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.

When to use

Use it for:

• Labelling or categorising an item with a short word: topics, filters applied, recipients.
• Items the user can remove (removable), such as selected filters.

Don’t use it for:

• Static status text with no interaction. Use Badge.
• Choosing among options. Use Checkbox or Select.
• Actions. Use Button.

Live Previews

Variants

NeutralSuccessWarningDangerInfo

<holo-tag variant="info">Info</holo-tag>

Removable

Removable

<holo-tag variant="neutral" removable>Removable</holo-tag>
<script>
  document.querySelector('holo-tag').addEventListener('holoRemove', event => {
    event.target.remove();
  });
</script>

Accessibility

The tag shows its slotted text. With removable, it adds a native <button type="button"> whose accessible name is removeLabel (default “Remove”) followed by the tag text, for example “Remove Design”. The tag text itself has no role.

Key	Action
Tab	Moves focus to the remove button
Enter, Space	Activates the remove button, which fires holoRemove

• The remove button shows a visible focus ring with :focus-visible.
• The component only emits holoRemove; it does not remove itself or move focus. That is your job.
• Set remove-label to translate the verb. The tag text is always appended, so each remove button in a list has a distinct name.

You provide:

• Clear tag text, and meaning that does not rely on variant colour alone.
• Focus management after removal, for example moving focus to the next tag or a nearby control.
• Tag text that is unique within a group, so the remove buttons stay distinguishable.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-tag';

Properties

Property	Attribute	Type	Default	Description
removable	removable	boolean	false	If true, renders a dismiss button that emits holoRemove when clicked.
removeLabel	remove-label	string	'Remove'	The verb announced by the remove button. The button's accessible name is this text followed by the tag's text, for example "Remove Design".
variant	variant	"danger" | "info" | "neutral" | "success" | "warning"	'neutral'	The semantic style variant of the tag, matching holo-badge.

Events

Event	Detail	Description
holoRemove	void	Emitted when the dismiss button is activated.

Slots

Slot	Description
(default)	The tag's label text.

CSS custom properties

Property	Description
--holo-tag-font-size	Font size of the tag label.
--holo-tag-padding	Inner padding of the tag.
--holo-tag-radius	Corner radius of the tag.