Tag

<oblyx-tag> is a sizeable, removable, optionally linked entity chip: a selected filter, a tag-input's rendered tag, a linked reference like #123. The label is the element's own light content, the same way badge takes its.

<oblyx-tag>Design</oblyx-tag>

oblyxTag { +"Design" }

Tag versus badge

The two look alike, and solve different problems. Badge is a static, non-interactive label with a semantic status axis (variant) and no size axis. Tag has no status axis at all: it is sizeable, disableable, removable, and optionally linked, a different interaction shape entirely rather than a second spelling of badge. Reach for badge to say something about state; reach for tag for something a user picks, removes, or follows.

Both share the same ten-value color enum, so a color chosen for one reads consistently if reused on the other.

Size

Three sizes, from the shared size scale also used by button. md is the default.

<oblyx-tag size="sm">Small</oblyx-tag>
<oblyx-tag size="md">Medium</oblyx-tag>
<oblyx-tag size="lg">Large</oblyx-tag>

oblyxTag(size = OblyxElementSize.SM) { +"Small" }
oblyxTag(size = OblyxElementSize.MD) { +"Medium" }
oblyxTag(size = OblyxElementSize.LG) { +"Large" }

Color

Ten non-semantic hues, the same OblyxStandardColor set badge's own color draws from. Unset renders a neutral, uncolored tag. As with badge, this value set is not currently promised stable across library versions; weigh that before persisting a chosen color, for example in a database column.

<oblyx-tag color="blue">Blue</oblyx-tag>
<oblyx-tag color="cyan">Cyan</oblyx-tag>
<oblyx-tag color="gray">Gray</oblyx-tag>
<oblyx-tag color="green">Green</oblyx-tag>
<oblyx-tag color="orange">Orange</oblyx-tag>
<oblyx-tag color="pink">Pink</oblyx-tag>
<oblyx-tag color="purple">Purple</oblyx-tag>
<oblyx-tag color="red">Red</oblyx-tag>
<oblyx-tag color="teal">Teal</oblyx-tag>
<oblyx-tag color="yellow">Yellow</oblyx-tag>

// A color picker: build one tag per available color, rather than
// listing the ten values by hand. Mirrors <oblyx-badge>'s own color
// example, since both draw from the same enum.
div {
  for (color in OblyxStandardColor.entries) {
    oblyxTag(color = color) { +color.attributeValue.replaceFirstChar { it.uppercase() } }
  }
}

Icon

icon is an optional leading glyph, resolved against the same registry <oblyx-icon> uses. There is no default; omit it for a text-only tag.

<oblyx-tag icon="calendar">Due Friday</oblyx-tag>

oblyxTag(icon = OblyxIconName.CALENDAR) { +"Due Friday" }

Removable

removable shows a trailing remove control that fires a bubbling remove event on click. The tag does not remove itself from the DOM: unlike a dismissible alert or a toast, whether removal means deleting the tag, unselecting a filter, or something else entirely is a decision the listener owns. A real page wires this with tagElement.addEventListener('remove', ...); remove is a custom event, not one of the fixed set of events the browser exposes as an on* content attribute, so there is no onremove to set inline the way onclick works. The example below listens for the underlying click instead, and checks that it landed on the remove button, to keep this page's live examples self-contained with no <script> tag.

<oblyx-tag removable onclick="if (event.target.closest('button')) this.remove()">Backend</oblyx-tag>
<oblyx-tag removable onclick="if (event.target.closest('button')) this.remove()">Frontend</oblyx-tag>

oblyxTag(removable = true) {
  onClick = "if (event.target.closest('button')) this.remove()"
  +"Backend"
}
oblyxTag(removable = true) {
  onClick = "if (event.target.closest('button')) this.remove()"
  +"Frontend"
}

Linked

Setting href renders the label as a real <a>. Combined with removable, the link and the remove control render as siblings inside one wrapping <span> rather than one nested inside the other, since a <button> cannot nest inside an <a>.

<oblyx-tag href="/docs/components/badge/">#124</oblyx-tag>

oblyxTag(href = "/docs/components/badge/") { +"#124" }

<oblyx-tag href="/docs/components/badge/" removable onclick="if (event.target.closest('button')) this.remove()">#124</oblyx-tag>

oblyxTag(href = "/docs/components/badge/", removable = true) {
  onClick = "if (event.target.closest('button')) this.remove()"
  +"#124"
}

A plain clickable, non-navigating tag has no dedicated attribute: attach a click listener directly to the host element, and add tabindex="0" if it also needs to be keyboard-focusable, the same low-magic answer this library gives for anything outside its core supported shapes.

Disabled

disabled also suppresses the href link path, matching button's own reasoning: a disabled link is an accessibility anti-pattern, so a disabled, linked tag falls back to the static shape instead.

<oblyx-tag disabled>Archived</oblyx-tag>
<oblyx-tag disabled removable>Archived</oblyx-tag>

oblyxTag(disabled = true) { +"Archived" }
oblyxTag(disabled = true, removable = true) { +"Archived" }

Reference