Basic Usage

A Tag
<template>
  <c-tag label="A Tag" />
</template>
Click to open/fold code
Open Vue Repl Editor

Themes

Primary
Secondary
Warning
Negative
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag label="Primary" />
    </div>
    <div>
      <c-tag label="Secondary" theme="secondary" rounded />
    </div>
    <div>
      <c-tag label="Warning" theme="warning" />
    </div>
    <div>
      <c-tag label="Negative" theme="negative" />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Rounded

A rounded tag
<template>
  <c-tag rounded label="A rounded tag" />
</template>
Click to open/fold code
Open Vue Repl Editor

Sizes

xs tag
sm tag
md (default) tag
lg tag
xl tag
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag label="xs tag" size="xs" />
    </div>
    <div>
      <c-tag label="sm tag" size="sm" />
    </div>
    <div>
      <c-tag label="md (default) tag" />
    </div>
    <div>
      <c-tag label="lg tag" size="lg" />
    </div>
    <div>
      <c-tag label="xl tag" size="xl" />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

Closeable

A closeable tag
A closeable tag
A closeable tag
A closeable tag
A closeable tag
<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-tag
        closeable
        label="A closeable tag"
        size="xs"
        theme="secondary"
      />
    </div>
    <div>
      <c-tag closeable label="A closeable tag" size="sm" />
    </div>
    <div>
      <c-tag closeable label="A closeable tag" theme="warning" />
    </div>
    <div>
      <c-tag closeable label="A closeable tag" size="lg" />
    </div>
    <div>
      <c-tag
        closeable
        label="A closeable tag"
        size="xl"
        theme="negative"
      />
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

CTag API

Props
Slots
Events
label
string
Default  ''

The label text.

theme
CTheme
Default  'primary'

The theme color.

size
CSize
Default  'md'

The size.

rounded
boolean
Default  false

Determine whether the tag has rounded border.

closeable
boolean
Default  false

Determine whether to show a close icon or not.