Tag

Examples

Size variants

Available ui prop values for size: s / m.

Normal

Steve

Tony

Peter

Natasha

Bruce

Small

Steve

Tony

Peter

Natasha

Bruce

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Normal</h4>
    <veui-tag class="tag">
      Steve
    </veui-tag>
    <veui-tag
      class="tag"
      status="info"
    >
      Tony
    </veui-tag>
    <veui-tag
      class="tag"
      status="success"
    >
      Peter
    </veui-tag>
    <veui-tag
      class="tag"
      status="warning"
    >
      Natasha
    </veui-tag>
    <veui-tag
      class="tag"
      status="error"
    >
      Bruce
    </veui-tag>
  </section>
  <section>
    <h4>Small</h4>
    <veui-tag
      class="tag"
      ui="s"
    >
      Steve
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="info"
    >
      Tony
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="success"
    >
      Peter
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="warning"
    >
      Natasha
    </veui-tag>
    <veui-tag
      class="tag"
      ui="s"
      status="error"
    >
      Bruce
    </veui-tag>
  </section>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

Selectable

Use the selectable prop to toggle the selected state of the tag.

Steve

Tony

Peter

Natasha

Bruce

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tag
    class="tag"
    selectable
  >
    Steve
  </veui-tag>
  <veui-tag
    class="tag"
    selectable
    status="info"
  >
    Tony
  </veui-tag>
  <veui-tag
    class="tag"
    selectable
    status="success"
  >
    Peter
  </veui-tag>
  <veui-tag
    class="tag"
    selectable
    status="warning"
  >
    Natasha
  </veui-tag>
  <veui-tag
    class="tag"
    selectable
    status="error"
  >
    Bruce
  </veui-tag>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

Removable

Use the removable prop to make the tag removable.

Steve

Tony

Peter

Natasha

Bruce

Edit this demo on GitHubEdit

<template>
<article>
  <veui-tag
    class="tag"
    removable
  >
    Steve
  </veui-tag>
  <veui-tag
    class="tag"
    removable
    status="info"
  >
    Tony
  </veui-tag>
  <veui-tag
    class="tag"
    removable
    status="success"
  >
    Peter
  </veui-tag>
  <veui-tag
    class="tag"
    removable
    status="warning"
  >
    Natasha
  </veui-tag>
  <veui-tag
    class="tag"
    removable
    status="error"
  >
    Bruce
  </veui-tag>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
.tag {
  margin-right: 10px;
}

section {
  margin-bottom: 20px;
}
</style>

Predefined colors

Use the color prop to set the name of the predefined color to be used.

Steve

Tony

Peter

Natasha

Bruce

Clint

Steve

Tony

Peter

Natasha

Bruce

Clint

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tag color="turquoise">
      Steve
    </veui-tag>
    <veui-tag color="violet">
      Tony
    </veui-tag>
    <veui-tag color="green">
      Peter
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="turquoise"
      removable
    >
      Natasha
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="violet"
      removable
    >
      Bruce
    </veui-tag>
    <veui-tag
      ui="bordered"
      color="green"
      removable
    >
      Clint
    </veui-tag>
  </section>
  <section>
    <veui-tag
      ui="reverse"
      color="turquoise"
    >
      Steve
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="violet"
    >
      Tony
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="green"
    >
      Peter
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="turquoise"
      removable
    >
      Natasha
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="violet"
      removable
    >
      Bruce
    </veui-tag>
    <veui-tag
      ui="reverse"
      color="green"
      removable
    >
      Clint
    </veui-tag>
  </section>
</article>
</template>

<script>
import { Tag } from 'veui'

export default {
  components: {
    'veui-tag': Tag
  }
}
</script>

<style lang="less" scoped>
section {
  display: flex;
  gap: 10px;

  & + & {
    margin-top: 20px;
  }
}
</style>

API

Props

Name	Type	Default	Description
`ui`	`string`	-	Predefined styles.
`status`	`string`	`'default'`	Status of the tag.
`type`	`string`	`'default'`	Deprecated. Use `status` instead.
`color`	`string`	-	The name of the predefined color for the tag. Currently supported colors are `'turquoise' \| 'violet' \| 'green'`.
`selectable`	`boolean`	`false`	Whether the tag can be selected.
`selected`	`boolean`	`false`	Whether the tag is selected.
`removable`	`boolean`	`false`	Whether the tag is removable.
`removed`	`boolean`	`false`	Whether the tag is removed.
`disabled`	`boolean`	`false`	Whether the tag is disabled.

Slots

Name	Description
`default`	Content area.

Events

Name	Description
`remove`	Triggered when the remove button is clicked.

Icons

Name	Description
`remove`	Remove icon.

Edit this page on GitHubEdit