Tag
@xui/tagA compact label chip. Colours, a subtle minimal variant, round/large/fill, an optional leading icon, and a removable ✕ that emits removed.
Install
pnpm add @xui/tag Add the barrel to a standalone component's imports:
import { XuiTagImports } from '@xui/tag';
@Component({
imports: [XuiTagImports],
// …
})Examples
Colors
Loading preview…
<div class="flex flex-wrap items-center gap-2">
<xui-tag>None</xui-tag>
<xui-tag color="primary">Primary</xui-tag>
<xui-tag color="success">Success</xui-tag>
<xui-tag color="warning">Warning</xui-tag>
<xui-tag color="error">Error</xui-tag>
</div>Minimal
Loading preview…
<div class="flex flex-wrap items-center gap-2">
<xui-tag minimal>None</xui-tag>
<xui-tag minimal color="primary">Primary</xui-tag>
<xui-tag minimal color="success">Success</xui-tag>
<xui-tag minimal color="warning">Warning</xui-tag>
<xui-tag minimal color="error">Error</xui-tag>
</div>Removable
Loading preview…
<div class="flex flex-wrap items-center gap-2">
@for (t of tags; track t) {
<xui-tag round large color="primary" minimal removable (removed)="tags = tags.filter(x => x !== t)">{{ t }}</xui-tag>
}
</div>Icon and interactive
Loading preview…
<div class="flex flex-wrap items-center gap-2">
<xui-tag interactive color="primary">Clickable</xui-tag>
<xui-tag minimal>v2.0.0-alpha.8</xui-tag>
</div>API
A compact label chip. Optionally shows a leading icon, reads as interactive, and can carry a remove ✕ that emits removed.
Variants
colornoneminimalfalselargefalseroundfalsefillfalseinteractivefalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''colorXuiTagColorIntent colour of the tag.this.config.colorminimalbooleanDrop the solid fill for a tinted, low-contrast tag. What you want when tags appear in bulk.this.config.minimallargebooleanUse the roomier padding and larger text.this.config.largeroundbooleanFully rounded ends, rather than the default soft corners.this.config.roundfillbooleanStretch to the available width, and stop truncating the label.falseinteractivebooleanRead as clickable (pointer cursor + hover feedback).this.config.interactiveremovablebooleanShow a trailing remove button.falseremoveLabelstringThe remove button's accessible name. A bare "Remove" is ambiguous once several tags sit together, so name the tag it belongs to — removeLabel="Remove design" — when they do.'Remove'iconstring | nullOptional leading icon name (from the app's icon registry).nullOutputs
removedvoidEmits when the remove button is pressed.