### File

`src/tag/tag.component.ts`

### Description

Component that represents a tag for labelling/categorizing using keywords

See demo

../../iframe.html?id=tag--basic

### Metadata

selector | `ibm-tag`
template |
    <ng-content></ng-content>

### Index

###### Inputs
class type
###### HostBindings
attr.class

### Inputs

`class` | Default value : `""`
Defined in src/tag/tag.component.ts:31

`type` | type of the tag determines the styling Reference `TagType` for v9 applications, and `TagTypeExperimental` for v10/v9 experimental mode applications Type : `TagType` Default value : `"gray"`
Defined in src/tag/tag.component.ts:29

### HostBindings

attr.class
`attr.class: ```
Defined in src/tag/tag.component.ts:33

    import {
    	Component,
    	Input,
    	HostBinding
    } from "@angular/core";

    /**
     * Supported tag types for carbon v10
     */
    export type TagType = "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray";

    /**
     * Component that represents a tag for labelling/categorizing using keywords
     *
     * [See demo](../../?path=/story/tag--basic)
     *
     * <example-url>../../iframe.html?id=tag--basic</example-url>
     */
    @Component({
    	selector: "ibm-tag",
    	template: `<ng-content></ng-content>`
    })
    export class Tag {
    	/**
    	 * type of the tag determines the styling
    	 *
    	 * Reference `TagType` for v9 applications, and `TagTypeExperimental` for v10/v9 experimental mode applications
    	 */
    	@Input() type: TagType = "gray";

    	@Input() class = "";

    	@HostBinding("attr.class") get attrClass() {
    		return `bx--tag bx--tag--${this.type} ${this.class}`;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""