first commit

resources/js/views/demos/components/badge/DemoBadgeTonal.vue

@@ -0,0 +1,41 @@
+<script setup>
+import avatar1 from '@images/avatars/avatar-1.png'
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <VBadge
+      content="5"
+      class="v-badge--tonal"
+    >
+      <VAvatar size="48">
+        <VImg :src="avatar1" />
+      </VAvatar>
+    </VBadge>
+
+    <!-- default -->
+    <VBadge
+      content="1"
+      class="v-badge--tonal"
+      color="error"
+    >
+      <VBtn
+        variant="tonal"
+        color="error"
+      >
+        Default
+      </VBtn>
+    </VBadge>
+
+    <!-- icon -->
+    <VBadge
+      icon="ri-lock-unlock-line"
+      color="info"
+      class="v-badge--tonal"
+    >
+      <VAvatar>
+        <VImg :src="avatar1" />
+      </VAvatar>
+    </VBadge>
+  </div>
+</template>