Tag

Used for marking and categorization.
Import
Source components/tag Issue Open issues 9
Docs Edit this page LLMs.md

When To Use#

  • It can be used to tag by dimension or property.

  • When categorizing.

Examples#

Tag 1LinkTag 2Prevent Default
Basic

Usage of basic Tag, and it could be closeable by set nzMode="closeable" property. Closeable Tag supports nzOnClose events.

      Loading...
Unremovable Tag 2 Tag 3 New Tag
Add & Remove Dynamically

Generating a set of Tags by array, you can add and remove dynamically.

      Loading...
Categories: Movie Books Music Sports
Hot Tags

Select your favourite topics.

      Loading...
Tag 1Tag 2Tag 3Tag 4Tag 5
Draggable Tag

Use CDK DragDropModule to make tags draggable.

      Loading...

Without icon

successprocessingerrorwarningdefault

With icon

successprocessingerrorwarningdefault
Status Tag

We preset five different colors, you can set nzColor property such as success,processing,error,default and warning to indicate specific status.

      Loading...

Presets:

pinkredyelloworangecyangreenbluepurplegeekbluemagentavolcanogoldlime

Custom:

#f50#2db7f5#87d068#108ee9
Colorful Tag

We preset a series of colorful tag style for different situation usage. And you can always set it to a hex color string for custom color.

      Loading...
Tag1Tag2Tag3
Checkable

nzMode="checkable" works like Checkbox, click it to toggle checked state.

      Loading...
pinkredyelloworangecyangreenbluepurplegeekbluemagentavolcanogoldlime
Borderless

borderless.

      Loading...
TwitterYoutubeFacebookLinkedIn
Icon

Tag components can contain an icon.

      Loading...

API#

nz-tag#

PropertyDescriptionTypeDefault
[nzMode]Mode of tag'closeable' | 'default' | 'checkable''default'
[nzChecked]Checked status of Tag, double binding, only works when nzMode="checkable"booleanfalse
[nzColor]Color of the Tagstring-
[nzBordered]Whether has border stylebooleantrue
(nzOnClose)Callback executed when tag is closed, only works when nzMode="closable"EventEmitter<MouseEvent>-
(nzCheckedChange)Checked status change call back, only works when nzMode="checkable"EventEmitter<boolean>-