<p>Vue3 Tag component is used to categorize content.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> Tag <span class="hljs-keyword">from</span> <span class="hljs-string">'primevue/tag'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Content of the tag is specified using the <strong>value</strong> property.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Tag</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"New"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span>
</code></pre>
<h3 id="icon">Icon</h3>
<p>An icon can also be configured to be displayed next to the value with the <strong>icon</strong> property.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Tag</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"New"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"pi pi-plus"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span>
</code></pre>
<h3 id="severities">Severities</h3>
<p>Different color options are available as severity levels.</p>
<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Tag</span> <span class="hljs-attr">severity</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Danger"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span>
</code></pre>
<h3 id="templating">Templating</h3>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Tag</span>&gt;</span>
   Content
<span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>Tag supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/tag">Tag</a> showcase for demos and documentation.</p>


Vue3 Tag component is used to categorize content.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import Tag from 'primevue/tag';
```

### Getting Started

Content of the tag is specified using the **value** property.

```html
<Tag value="New"></Tag>
```

### Icon

An icon can also be configured to be displayed next to the value with the **icon** property.

```html
<Tag value="New" icon="pi pi-plus"></Tag>
```

### Severities

Different color options are available as severity levels.

- success
- info
- warning
- danger

```html
<Tag severity="danger" value="Danger"></Tag>
```

### Templating

Content can easily be customized with the default slot instead of using the built-in display.

```html
<Tag>
   Content
</Tag>
```

### Theming

Tag supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primevue/showcase/#/theming) tool.

### Resources

Visit the PrimeVue [Tag](https://primefaces.org/primevue/showcase/#/tag) showcase for demos and documentation.