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

Props

Prop	Type	Default	Description
size	'large' | 'medium' | 'small'	N/A	배지 크기
color	'primary' | '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'	'gray-light'	배지 색상
text	string	N/A	배지에 표시할 텍스트
leadingIcon	IconTypes	undefined	텍스트 앞에 표시할 아이콘
trailingIcon	IconTypes	undefined	텍스트 뒤에 표시할 아이콘

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