배지

<div class="krds-badge-wrap">
	<span class="krds-badge outline-primary">Label</span>
	<span class="krds-badge outline-secondary">Label</span>
	<span class="krds-badge outline-gray">Label</span>
	<span class="krds-badge outline-point">Label</span>
	<span class="krds-badge outline-danger">Label</span>
	<span class="krds-badge outline-warning">Label</span>
	<span class="krds-badge outline-success">Label</span>
	<span class="krds-badge outline-information">Label</span>
	<span class="krds-badge outline-disabled">Label</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-primary">Label</span>
	<span class="krds-badge bg-secondary">Label</span>
	<span class="krds-badge bg-gray">Label</span>
	<span class="krds-badge bg-point">Label</span>
	<span class="krds-badge bg-danger">Label</span>
	<span class="krds-badge bg-warning">Label</span>
	<span class="krds-badge bg-success">Label</span>
	<span class="krds-badge bg-information">Label</span>
	<span class="krds-badge bg-disabled">Label</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-light-primary">Label</span>
	<span class="krds-badge bg-light-secondary">Label</span>
	<span class="krds-badge bg-light-gray">Label</span>
	<span class="krds-badge bg-light-point">Label</span>
	<span class="krds-badge bg-light-danger">Label</span>
	<span class="krds-badge bg-light-warning">Label</span>
	<span class="krds-badge bg-light-success">Label</span>
	<span class="krds-badge bg-light-information">Label</span>
	<span class="krds-badge bg-light-disabled">Label</span>
</div>

<template>
  <div class="krds-badge-wrap">
	<span class="krds-badge outline-primary">Label</span>
	<span class="krds-badge outline-secondary">Label</span>
	<span class="krds-badge outline-gray">Label</span>
	<span class="krds-badge outline-point">Label</span>
	<span class="krds-badge outline-danger">Label</span>
	<span class="krds-badge outline-warning">Label</span>
	<span class="krds-badge outline-success">Label</span>
	<span class="krds-badge outline-information">Label</span>
	<span class="krds-badge outline-disabled">Label</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-primary">Label</span>
	<span class="krds-badge bg-secondary">Label</span>
	<span class="krds-badge bg-gray">Label</span>
	<span class="krds-badge bg-point">Label</span>
	<span class="krds-badge bg-danger">Label</span>
	<span class="krds-badge bg-warning">Label</span>
	<span class="krds-badge bg-success">Label</span>
	<span class="krds-badge bg-information">Label</span>
	<span class="krds-badge bg-disabled">Label</span>
</div>

<div class="krds-badge-wrap">
	<span class="krds-badge bg-light-primary">Label</span>
	<span class="krds-badge bg-light-secondary">Label</span>
	<span class="krds-badge bg-light-gray">Label</span>
	<span class="krds-badge bg-light-point">Label</span>
	<span class="krds-badge bg-light-danger">Label</span>
	<span class="krds-badge bg-light-warning">Label</span>
	<span class="krds-badge bg-light-success">Label</span>
	<span class="krds-badge bg-light-information">Label</span>
	<span class="krds-badge bg-light-disabled">Label</span>
</div>
</template>

<script setup lang="ts">
// 배지 컴포넌트
// 상태 표시 배지 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>