Tag

Tag for categorizing or markup.

When To Use#

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

  • When categorizing.

import { NzTagModule } from 'ng-zorro-antd/tag';

Examples

Tag 1LinkTag 2Prevent Default

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

expand codeexpand code
Loading...
UnremovableTag 2 Tag 3 New Tag

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

expand codeexpand code
Loading...
Categories:MovieBooksMusicSports

Select your favourite topics.

expand codeexpand code
Loading...
TwitterYoutubeFacebookLinkedIn

Tag components can contain an icon.

expand codeexpand code
Loading...

Presets:

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Custom:

#f50#2db7f5#87d068#108ee9

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.

expand codeexpand code
Loading...
Tag1Tag2Tag3

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

expand codeexpand code
Loading...
pinkredyelloworangecyangreenbluepurplegeekbluemagentavolcanogoldlime

borderless.

expand codeexpand code
Loading...

Without icon

successprocessingerrorwarningdefault

With icon

successprocessingerrorwarningdefault

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

expand codeexpand code
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>-