Tag

Used for marking and categorization.
Import
Source components/tag
Docs Edit this page

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...
TwitterYoutubeFacebookLinkedIn
Icon

Tag components can contain an icon.

      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...

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...

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>-