## Tag Used for marking and selection. ### Basic usage :::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag. ```html Tag One Tag Two Tag Three Tag Four Tag Five ``` ::: ### Removable Tag :::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed. ```html {{tag.name}} ``` ::: ### Edit Dynamically You can use the `close` event to add and remove tag dynamically. :::demo ```html {{tag}} + New Tag ``` ::: ### Sizes Besides default size, Tag component provides three additional sizes for you to choose among different scenarios. :::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ```html Default Medium Small Mini ``` ::: ### Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | theme | string | success/info/warning/danger | — | | closable | whether Tag can be removed | boolean | — | false | | disable-transitions | whether to disable animations | boolean | — | false | | hit | whether Tag has a highlighted border | boolean | — | false | | color | background color of the Tag | string | — | — | | size | tag size | string | medium / small / mini | — | ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | close | triggers when Tag is removed | — |