Tag

Displays a compact label with optional icon and dismissal.

Tag web component

Displays a compact label with optional icon and dismissal.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic tags

Render plain tags and tags with different icons.

<noora-tag label="Simple Tag"></noora-tag>
<noora-tag label="Category" icon="category"></noora-tag>
<noora-tag label="User" icon="user"></noora-tag>

Dismissible states

Allow removal when a tag represents editable input.

<noora-tag label="Dismissible Tag" icon="category" dismissible></noora-tag>
<noora-tag label="Fixed Tag" icon="category"></noora-tag>
<noora-tag label="Remove Me" dismissible></noora-tag>

Disabled states

Disable plain, icon, and dismissible tags.

<noora-tag label="Disabled Tag" disabled></noora-tag>
<noora-tag label="Disabled" icon="category" disabled></noora-tag>
<noora-tag label="Disabled Dismissible" icon="category" dismissible disabled></noora-tag>

Content variations

Support short, long, version, and status labels.

<noora-tag label="New" dismissible></noora-tag>
<noora-tag label="Very Long Tag Label That Might Wrap" icon="category" dismissible></noora-tag>
<noora-tag label="v2.1.0" icon="git_branch"></noora-tag>
<noora-tag label="In Progress" icon="progress_x" dismissible></noora-tag>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the visible label.
`dismissible`	boolean	`false`	Shows a dismiss control.
`dismiss-value`	string	`None`	Adds a value to the dismiss event.
`icon`	string	`None`	Sets a Noora icon before the label.
`disabled`	boolean	`false`	Disables dismissal.

Events

Event	Type	Description
`noora-dismiss`	`CustomEvent<{ value: string \| undefined }>`	Emitted when the tag dismiss control is activated.

Slots

Name	Description
`icon`	A custom icon that takes precedence over the icon attribute.

Styling parts

Name	Description
`tag`	The tag container.
`label`	The label.
`dismiss`	The dismiss control.

Behavior

Dismissal emits a `noora-dismiss` event.