Badge

Basic

<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge :text="'Pod'" />
    <badge :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge :text="'Pod'" :trailing-icon="ICON_TYPE.pod" />
    <badge
        :text="'Pod'"
        :leading-icon="ICON_TYPE.pod"
        :trailing-icon="ICON_TYPE.pod"
    />
</template>

Pod

Pod

Pod

Pod

Size

<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge size="large" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge size="medium" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge size="small" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
</template>

Pod

Pod

Pod

Color

<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge color="gray" text="gray" :leading-icon="ICON_TYPE.pod" />
    <badge color="red" text="red" :leading-icon="ICON_TYPE.pod" />
    <badge color="green" text="green" :leading-icon="ICON_TYPE.pod" />
    <badge color="blue" text="blue" :leading-icon="ICON_TYPE.pod" />
    <badge color="purple" text="purple" :leading-icon="ICON_TYPE.pod" />
    <badge color="pink" text="pink" :leading-icon="ICON_TYPE.pod" />
    <badge color="orange" text="orange" :leading-icon="ICON_TYPE.pod" />
    <badge color="teal" text="teal" :leading-icon="ICON_TYPE.pod" />
    <badge color="skyblue" text="skyblue" :leading-icon="ICON_TYPE.pod" />
    <badge color="inverted" text="inverted" :leading-icon="ICON_TYPE.pod" />
    <badge color="gray-light" text="gray-light" :leading-icon="ICON_TYPE.pod" />
    <badge color="red-light" text="red-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="green-light"
        text="green-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="blue-light" text="blue-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="purple-light"
        text="purple-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="pink-light" text="pink-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="orange-light"
        text="orange-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="teal-light" text="teal-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="skyblue-light"
        text="skyblue-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge
        color="inverted-light"
        text="inverted-light"
        :leading-icon="ICON_TYPE.pod"
    />
</template>

gray

red

green

blue

purple

pink

orange

teal

skyblue

inverted

gray-light

red-light

green-light

blue-light

purple-light

pink-light

orange-light

teal-light

skyblue-light

inverted-light