PubBadge

This is a badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Default badges

Prop - color Usage

The color prop can be used to change the color of the badge.

Default Blue Red Green Yellow Pink Cyan Purple Grey

<template>
  <pub-badge color="default">
    Default
  </pub-badge>
  <pub-badge color="blue">
    Blue
  </pub-badge>
  <pub-badge color="red">
    Red
  </pub-badge>
  <pub-badge color="green">
    Green
  </pub-badge>
  <pub-badge color="yellow">
    Yellow
  </pub-badge>
  <pub-badge color="pink">
    Pink
  </pub-badge>
  <pub-badge color="cyan">
    Cyan
  </pub-badge>
  <pub-badge color="purple">
    Purple
  </pub-badge>
  <pub-badge color="grey">
    Grey
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge } from 'vuelicity'
</script>

Large badges

Prop - size Usage

The size prop can be used to change the size of the badge.

Extra Small Small Medium

<template>
  <pub-badge size="xs">
    Extra Small
  </pub-badge>
  <pub-badge size="sm">
    Small
  </pub-badge>
  <pub-badge size="md">
    Medium
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge } from 'vuelicity'
</script>

Bordered badges

Prop - bordered Usage

The bordered prop can be used to add a border to the badge.

Default Blue Red Green Yellow Pink Cyan Purple Grey

<template>
  <pub-badge bordered>
    Default
  </pub-badge>
  <pub-badge
    color="blue"
    bordered
  >
    Blue
  </pub-badge>
  <pub-badge
    color="red"
    bordered
  >
    Red
  </pub-badge>
  <pub-badge
    color="green"
    bordered
  >
    Green
  </pub-badge>
  <pub-badge
    color="yellow"
    bordered
  >
    Yellow
  </pub-badge>
  <pub-badge
    color="pink"
    bordered
  >
    Pink
  </pub-badge>
  <pub-badge
    color="cyan"
    bordered
  >
    Cyan
  </pub-badge>
  <pub-badge
    color="purple"
    bordered
  >
    Purple
  </pub-badge>
  <pub-badge
    color="grey"
    bordered
  >
    Grey
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge } from 'vuelicity'
</script>

Dismissable badges (chips)

Prop - dismissable Usage

The dismissable prop can be used to make the badge dismissable.

Brand

<template>
  <pub-badge
    v-if="shown"
    color="blue"
    dismissable
    @dismiss="shown = false"
  >
    Brand
  </pub-badge>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubBadge } from 'vuelicity'

const shown = ref(true)
</script>

Rounded badges

Prop - rounded Usage

The rounded prop can be used to add rounded corners to the badge.

Default Blue Red Green Yellow Pink Cyan Purple Grey

<template>
  <pub-badge rounded>
    Default
  </pub-badge>
  <pub-badge
    color="blue"
    rounded
  >
    Blue
  </pub-badge>
  <pub-badge
    color="red"
    rounded
  >
    Red
  </pub-badge>
  <pub-badge
    color="green"
    rounded
  >
    Green
  </pub-badge>
  <pub-badge
    color="yellow"
    rounded
  >
    Yellow
  </pub-badge>
  <pub-badge
    color="pink"
    rounded
  >
    Pink
  </pub-badge>
  <pub-badge
    color="cyan"
    rounded
  >
    Cyan
  </pub-badge>
  <pub-badge
    color="purple"
    rounded
  >
    Purple
  </pub-badge>
  <pub-badge
    color="grey"
    rounded
  >
    Grey
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge } from 'vuelicity'
</script>

Badges as links

Prop - href Usage

The href prop can be used to make the badge a link.

Default Blue Red Green Yellow Pink Cyan Purple Grey

<template>
  <pub-badge href="#">
    Default
  </pub-badge>
  <pub-badge
    color="blue"
    href="#"
  >
    Blue
  </pub-badge>
  <pub-badge
    color="red"
    href="#"
  >
    Red
  </pub-badge>
  <pub-badge
    color="green"
    href="#"
  >
    Green
  </pub-badge>
  <pub-badge
    color="yellow"
    href="#"
  >
    Yellow
  </pub-badge>
  <pub-badge
    color="pink"
    href="#"
  >
    Pink
  </pub-badge>
  <pub-badge
    color="cyan"
    href="#"
  >
    Cyan
  </pub-badge>
  <pub-badge
    color="purple"
    href="#"
  >
    Purple
  </pub-badge>
  <pub-badge
    color="grey"
    href="#"
  >
    Grey
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge } from 'vuelicity'
</script>

Badges with icons

Slot - icon Usage

The icon slot can be used to add an icon to the badge.

Light Dark

<template>
  <pub-badge>
    <template #icon>
      <pub-icon
        name="sun"
        size="xs"
      />
    </template>
    Light
  </pub-badge>
  <pub-badge color="grey">
    <template #icon>
      <pub-icon
        name="moon"
        type="outline"
        size="xs"
      />
    </template>
    Dark
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge, PubIcon } from 'vuelicity'
</script>

Badges with only icon

<template>
  <pub-badge>
    <template #icon>
      <pub-icon name="sun" />
    </template>
  </pub-badge>
  <pub-badge color="grey">
    <template #icon>
      <pub-icon
        name="sun"
        size="xs"
      />
    </template>
  </pub-badge>
</template>

<script lang="ts" setup>
import { PubBadge, PubIcon } from 'vuelicity'
</script>

Notification Badge

<template>
  <pub-button
    size="xs"
    color="blue"
    class="relative"
    square
  >
    <pub-icon
      name="envelope"
      type="solid"
    />
    <pub-badge
      class="size-5 absolute -top-2.5 -right-2.5 text-[0.6rem]"
      color="pink"
      rounded
    >
      99
    </pub-badge>
  </pub-button>
</template>

<script lang="ts" setup>
import { PubBadge, PubButton, PubIcon } from 'vuelicity'
</script>

Reference

Properties

Name	Type	Default	Description	Options
color	String	'default'	The color color of the badge.	'default', 'blue', 'red', 'yellow', 'green', 'pink', 'cyan', 'purple', 'grey'
size	String	'xs'	The size of the badge.	'xs', 'sm', 'md'
href	String	null	The URL to link to. If provided, the badge renders as an anchor tag.
bordered	Boolean	false	Whether to add a border to the badge.
rounded	Boolean	false	Whether to add rounded corners to the badge.

Slots

Name	Description
default	The content of the badge.
icon	Slot for an icon.