Tag

Used for marking and selection.

Usage

type

Use the type attribute to define Tag's type.

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag>tag</pl-tag>
      <pl-tag mode="outline">
        tag
      </pl-tag>
      <pl-tag mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag>tag</pl-tag>
      <pl-tag mode="outline">
        tag
      </pl-tag>
      <pl-tag mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

state

You can define different states.

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag value="6" state="info">
        tag
      </pl-tag>
      <pl-tag value="6" state="success">
        tag
      </pl-tag>
      <pl-tag value="6" state="warning">
        tag
      </pl-tag>
      <pl-tag value="6" state="danger">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag value="6" state="info">
        tag
      </pl-tag>
      <pl-tag value="6" state="success">
        tag
      </pl-tag>
      <pl-tag value="6" state="warning">
        tag
      </pl-tag>
      <pl-tag value="6" state="danger">
        tag
      </pl-tag>
    </div>
  </div>
</template>

shape

Predefined the shape of the Tag.

rounded

pilled

<template>
  <div space-y-2>
    <div fscw gap-2>
      <pl-tag mode="solid">
        rounded
      </pl-tag>
      <pl-tag mode="outline" shape="pilled">
        pilled
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-2>
      <pl-tag mode="solid">
        rounded
      </pl-tag>
      <pl-tag mode="outline" shape="pilled">
        pilled
      </pl-tag>
    </div>
  </div>
</template>

closable

Use the closable attribute to define a removable tag.

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag closable>
        tag
      </pl-tag>
      <pl-tag closable mode="outline">
        tag
      </pl-tag>
      <pl-tag closable mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag closable>
        tag
      </pl-tag>
      <pl-tag closable mode="outline">
        tag
      </pl-tag>
      <pl-tag closable mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

indicator

Use an indicator appearance to show indication.

tag

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag indicator>
        tag
      </pl-tag>
      <pl-tag indicator mode="outline">
        tag
      </pl-tag>
      <pl-tag indicator mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-tag indicator>
        tag
      </pl-tag>
      <pl-tag indicator mode="outline">
        tag
      </pl-tag>
      <pl-tag indicator mode="soft">
        tag
      </pl-tag>
    </div>
  </div>
</template>

Props

Name	Type	Default	Description
type	`solid` \| `outline` \| `soft`	`solid`	Set custom type attribute.
color	`blue` \| `teal` \| `red` \| `yellow` \| `gray` \| `deepGray`	`teal`	Set tag color.
shape	`rounded` \| `pilled`	`rounded`	Set tag shape.
closable	`boolean`	`false`	Use the closable attribute to define a removable tag.
indicator	`boolean`	`false`	Use an indicator appearance to show indication.

Tag ​

Usage ​

type ​

state ​

shape ​

closable ​

indicator ​

Props ​

Tag