<le-tag>

Small label that is used in the <le-multiselect> component. and navigation.

Usage

<le-tag size="small" color="secondary" dismissible>Extra Items</le-tag>
<le-tag icon="♥" dismissible disabled>Favorites</le-tag>
<le-tag size="large" color="info">Important</le-tag>

Properties / Attributes

@dismissible

The @dismissible attribute allows you to make the tag dismissible, showing a close button. When the close button is clicked, a leDismiss event is emitted.

@icon

The @icon attribute accept a character (emoji) or just a string and display it as it is.

In future updates, we will add support for a slot to allow using <le-icon> or custom icons.

<le-tag icon="♥" dismissible>Favorites</le-tag>

@disabled

The @disabled currently renders the tag semi-transparent and in case the tag is dismissible, it disables the dismiss button and does not emit the leDismiss event when the dismiss button is clicked.

<le-tag dismissible disabled>Favorites</le-tag>

@color

The colors are the same as buttons, except there is a default one, that renders the tag on a gray background (by default, the color can be changed)

<le-tag>Default</le-tag>
<le-tag color="primary">Primary</le-tag>
<le-tag color="secondary">Secondary</le-tag>
<le-tag color="success">Success</le-tag>
<le-tag color="warning">Warning</le-tag>
<le-tag color="danger">Danger</le-tag>
<le-tag color="info">Info</le-tag>

@size

The @size attribute allows you to set the size of the tag. The default size is medium, but you can also set it to small or large.

<le-tag size="small">Small</le-tag>
<le-tag>Medium</le-tag>
<le-tag size="large">Large</le-tag>

Events

leDismiss Event

Simple event without any payload. Fires, when the dismiss button is clicked.

You can subscribe to this event using addEventListener on the <le-tag> element. or using attributes in your framework of choice.

const tag = document.getElementById("le-tag-to-dismiss");
tag.addEventListener("leDismiss", () => {
  alert("Tag dismissed");
});