Tag

Basic Usage

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

<template>
  <bp-space>
    <bp-tag v-for="(item, index) in status" :key="item" border :status="item">Tag {{ index + 1 }}</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { TagStatus } from "@birdpaper-ui/components";
import { ref } from "vue";

const status = ref<TagStatus[]>(["gray", "primary", "success", "warning", "danger"]);
</script>

Borderless

Render tags without a border.

Tag gray

Tag primary

Tag success

Tag warning

Tag danger

<template>
  <bp-space>
    <bp-tag v-for="item in status" :key="item" :status="item">Tag {{ item }}</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { TagStatus } from "@birdpaper-ui/components";
import { ref } from "vue";

const status = ref<TagStatus[]>(["gray", "primary", "success", "warning", "danger"]);
</script>

Icon

Add an icon with the icon prop.

Success

Failed

Warning

Info

<template>
  <bp-space>
    <bp-tag :icon="IconCheckLine" status="success">Success</bp-tag>
    <bp-tag :icon="IconCloseCircleLine" status="danger">Failed</bp-tag>
    <bp-tag :icon="IconErrorWarningLine" status="warning">Warning</bp-tag>
    <bp-tag :icon="IconInformationLine" status="primary">Info</bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { IconCheckLine, IconCloseCircleLine, IconErrorWarningLine, IconInformationLine } from "birdpaper-icon";
</script>

Closable

Enable closing with closeable and the close event.

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

<template>
  <bp-space>
    <bp-tag v-for="item in tags" :key="item" :status="item.status" closeable @close="handleClose(item)">
      {{ item.label }}
    </bp-tag>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface TagItem {
  label: string;
  status: string;
}

const tags = ref<TagItem[]>([
  { label: "Tag 1", status: "gray" },
  { label: "Tag 2", status: "primary" },
  { label: "Tag 3", status: "success" },
  { label: "Tag 4", status: "warning" },
  { label: "Tag 5", status: "danger" },
]);

const handleClose = (item: TagItem) => {
  tags.value = tags.value.filter((t) => t !== item);
};
</script>

Tag Props

icon	Icon component	Component	-	-
status	Tag status	String	gray	-
border	Whether bordered	Boolean	-	-
closeable	Whether closable	Boolean	-	-

Tag Events

close

Triggered when the close button is clicked

-

-

Tag Slots

default

Label content

-

-