v0.15.0

Appearance

Tag <l-tag> ​

Tags are compact chips for tokens, filters, and selected values, with an optional remove button.

html
<l-tag removable>Design</l-tag>
HTML tag<l-tag>
⏣Native
⬡Progressive
◇Plain
⬢Shadow-DOM
Shadow-DOM Custom Element

Options ​

Removable ​

Add removable for a × button. The user can also press Backspace or Delete while it is focused. Each removal fires a cancelable remove event; if nothing calls preventDefault(), the tag removes itself from the DOM.

Design Development Removable
Code
html
<div class="flex flex-wrap items-center gap-2">
  <l-tag>Design</l-tag>
  <l-tag>Development</l-tag>
  <l-tag removable>Removable</l-tag>
</div>

Sizes ​

Add size="sm" or size="lg". Default is md. A removable tag is always at least 24px tall to keep its remove target accessible.

Small Medium Large
Code
html
<div class="flex flex-wrap items-center gap-2">
  <l-tag
    size="sm"
    removable
    >Small</l-tag
  >
  <l-tag removable>Medium</l-tag>
  <l-tag
    size="lg"
    removable
    >Large</l-tag
  >
</div>

Leading content ​

Put an icon or avatar in the prefix slot.

Marketing Jane Cooper
Code
html
<div class="flex flex-wrap items-center gap-2">
  <l-tag removable>
    <l-icon
      slot="prefix"
      name="mdi:tag-outline"
    ></l-icon>
    Marketing
  </l-tag>
  <l-tag removable>
    <l-icon
      slot="prefix"
      name="mdi:account-outline"
    ></l-icon>
    Jane Cooper
  </l-tag>
</div>

Disabled ​

Add disabled to block removal. The label stays legible — disabled is conveyed by the dimmed × button and the not-allowed cursor, not by washing out the text.

Locked
Code
html
<div class="flex flex-wrap items-center gap-2">
  <l-tag
    removable
    disabled
    >Locked</l-tag
  >
</div>

Accessibility ​

Criteria ​

Accessible name

The remove button exposes a localized Remove label

WCAG4.1.2
RGAA11.1
Target size

The remove button keeps a minimum 24×24px hit target

WCAG2.5.8
RGAA13.10
Keyboard

The remove button is reachable with Tab and removes the tag with Backspace / Delete

WCAG2.1.1
RGAA12.9
Color contrast

The label keeps the minimum contrast ratio over the chip background in every state, including disabled

WCAG1.4.3
RGAA3.2

Keyboard interactions ​

Tab
Moves focus to the remove button (when removable)
Enter / Space
Activates the focused remove button
Backspace / Delete
Removes the tag while it is focused

API reference ​

Importing ​

js
import 'luxen-ui/tag';

Attributes & Properties ​

sizeTagSizedefault:'md'Property
Tag size: sm, md (default), or lg.
removablebooleandefault:falseProperty
Show a remove button (and enable Backspace/Delete removal).
disabledbooleandefault:falseProperty
Disable the tag — dims it and blocks removal.

Events ​

removecancelableEvent
Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.