diff --git a/components/tag/demo/status.md b/components/tag/demo/status.md
new file mode 100644
index 00000000000..0d041dc31d5
--- /dev/null
+++ b/components/tag/demo/status.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+ zh-CN: 预设状态的标签
+ en-US: Status Tag
+---
+
+## zh-CN
+
+预设五种状态颜色,可以通过设置 `nzColor` 为 `success`、 `processing`、`error`、`default`、`warning` 来代表不同的状态。
+
+## en-US
+
+We preset five different colors, you can set `nzColor` property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.
\ No newline at end of file
diff --git a/components/tag/demo/status.ts b/components/tag/demo/status.ts
new file mode 100644
index 00000000000..ba1edf0592a
--- /dev/null
+++ b/components/tag/demo/status.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-tag-status',
+ template: `
+ success
+ processing
+ error
+ default
+ warning
+ `
+})
+export class NzDemoTagStatusComponent {}
diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts
index 44aa0709f2b..9977152a5d7 100644
--- a/components/tag/nz-tag.component.ts
+++ b/components/tag/nz-tag.component.ts
@@ -53,7 +53,11 @@ export class NzTagComponent implements OnInit, OnChanges {
if (!color) {
return false;
}
- return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color);
+
+ return (
+ /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color) ||
+ /^(success|processing|error|default|warning)$/.test(color)
+ );
}
private updateClassMap(): void {
diff --git a/components/tag/nz-tag.spec.ts b/components/tag/nz-tag.spec.ts
index 031d7879e19..325965db33f 100644
--- a/components/tag/nz-tag.spec.ts
+++ b/components/tag/nz-tag.spec.ts
@@ -74,6 +74,19 @@ describe('tag', () => {
expect(tag.nativeElement.classList).toContain('ant-tag-green');
expect(tag.nativeElement.style.backgroundColor).toBe('');
});
+
+ it('should status color work', () => {
+ fixture.detectChanges();
+ testComponent.color = 'success';
+ fixture.detectChanges();
+ expect(tag.nativeElement.classList).toContain('ant-tag-success');
+ testComponent.color = 'processing';
+ fixture.detectChanges();
+ expect(tag.nativeElement.classList).toContain('ant-tag-processing');
+ testComponent.color = 'invalid';
+ fixture.detectChanges();
+ expect(tag.nativeElement.classList).not.toContain('ant-tag-invalid');
+ });
it('issues #1176', () => {
testComponent.color = 'green';
fixture.detectChanges();