Tag Component

Tags are an essential part in all web and mobile application with a wide variety of usage. Explore Vulk tags.

Components Open Docs
ColorRoundedSquareOutlinedElevation

Tag Colors

Available tag colors

DefaultSolidPrimarySuccessInfoWarningDangerOrangeBlueGreenPurple

<template>
  <Tag label="Default"></Tag>
  <Tag color="primary" label="Primary"></Tag>
  <Tag color="success" label="Success"></Tag>
</template>

Rounded tags

Rounded tags variation

DefaultSolidPrimarySuccessInfoWarningDangerOrangeBlueGreenPurple

<template>
  <Tag label="Default" shape="rounded"></Tag>
  <Tag color="solid" label="Solid" shape="rounded"></Tag>
  <Tag color="primary" label="Primary" shape="rounded"></Tag>
</template>

Square tags

Squared tags variation

DefaultSolidPrimarySuccessInfoWarningDangerOrangeBlueGreenPurple

<template>
  <Tag label="Default" shape="squared"></Tag>
  <Tag color="solid" label="Solid" shape="squared"></Tag>
  <Tag color="primary" label="Primary" shape="squared"></Tag>
</template>

Outlined Tags

Outlined tag colors

SolidPrimarySuccessInfoWarningDangerOrangeBlueGreenPurple

<template>
  <Tag label="Default" outlined></Tag>
  <Tag color="primary" label="Primary" outlined></Tag>
  <Tag color="success" label="Success" outlined></Tag>
</template>

Elevated tags

Elevated tags variation

DefaultSolidPrimarySuccessInfoWarningDangerOrangeBlueGreenPurple

<template>
  <Tag label="Default" shape="rounded" elevated></Tag>
  <Tag color="solid" label="Solid" shape="rounded" elevated></Tag>
  <Tag color="primary" label="Primary" shape="rounded" elevated></Tag>
</template>