버튼 계층구조

<button type="button" class="krds-btn primary">버튼 : primary</button>
<button type="button" class="krds-btn secondary">버튼 : secondary</button>
<button type="button" class="krds-btn tertiary">버튼 : tertiary</button>

<template>
  <button type="button" class="krds-btn primary">버튼 : primary</button>
<button type="button" class="krds-btn secondary">버튼 : secondary</button>
<button type="button" class="krds-btn tertiary">버튼 : tertiary</button>
</template>

<script setup lang="ts">
// 버튼 계층구조 컴포넌트
// 버튼의 중요도에 따른 계층 구조를 표현합니다.

import { ref } from 'vue'

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

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