diff --git a/src/components/button/ToggleButton.vue b/src/components/button/ToggleButton.vue
index 1589ea7a..a95669c9 100644
--- a/src/components/button/ToggleButton.vue
+++ b/src/components/button/ToggleButton.vue
@@ -1,19 +1,25 @@
 <script lang="ts" setup>
-defineEmits<{
+const emit = defineEmits<{
   (e: 'click'): void;
 }>();
 
-defineProps<{
+const props = defineProps<{
   twoWay?: boolean;
   color?: string;
+  disable?: boolean;
 }>();
 
 const model = defineModel<boolean>({ default: false });
+
+function handleClick() {
+  if (props.disable) return;
+  emit('click');
+}
 </script>
 <template>
-  <label class="switch" @click="$emit('click')">
-    <input type="checkbox" :disabled="twoWay" v-model="model" />
-    <div class="slider round"></div>
+  <label class="switch" @click.stop="handleClick">
+    <input type="checkbox" :disabled="twoWay || disable" v-model="model" />
+    <div class="slider round" :class="{ disable: disable }"></div>
   </label>
 </template>
 <style lang="scss" scoped>
@@ -38,6 +44,11 @@ const model = defineModel<boolean>({ default: false });
   background-color: hsl(var(--text-mute));
   -webkit-transition: 0.3s;
   transition: 0.3s;
+
+  &.disable {
+    cursor: not-allowed !important;
+    background-color: var(--stone-4);
+  }
 }
 
 .slider:before {
@@ -54,6 +65,10 @@ const model = defineModel<boolean>({ default: false });
 
 input:checked + .slider {
   background-color: hsl(var(--positive-bg));
+
+  &.disable {
+    background-color: var(--stone-4);
+  }
 }
 
 input:focus + .slider {