diff --git a/@xen-orchestra/lite/src/components/RouterTab.vue b/@xen-orchestra/lite/src/components/RouterTab.vue
index ba35972099c..95a3615fe59 100644
--- a/@xen-orchestra/lite/src/components/RouterTab.vue
+++ b/@xen-orchestra/lite/src/components/RouterTab.vue
@@ -13,17 +13,13 @@
 
 <script lang="ts" setup>
 import TabItem from '@core/components/tab/TabItem.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { RouteLocationRaw } from 'vue-router'
 
-const props = withDefaults(
-  defineProps<{
-    to: RouteLocationRaw
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  to: RouteLocationRaw
+  disabled?: boolean
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 </script>
diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
index 313c2a1739a..efd033995d7 100644
--- a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
+++ b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
@@ -16,23 +16,19 @@
 
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useContext } from '@/composables/context.composable'
-import { DisabledContext } from '@/context'
 import { IK_CHECKBOX_TYPE, IK_FORM_HAS_LABEL } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { faCheck, faCircle, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { useVModel } from '@vueuse/core'
 import { computed, type HTMLAttributes, inject, useAttrs } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: unknown
-    disabled?: boolean
-    wrapperAttrs?: HTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  modelValue?: unknown
+  disabled?: boolean
+  wrapperAttrs?: HTMLAttributes
+}>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -46,7 +42,7 @@ const hasLabel = inject(
   IK_FORM_HAS_LABEL,
   computed(() => false)
 )
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 const icon = computed(() => {
   if (type !== 'checkbox') {
     return faCircle
diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue
index 0e62dc72b44..f94c2bc5156 100644
--- a/@xen-orchestra/lite/src/components/form/FormInput.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInput.vue
@@ -53,9 +53,10 @@
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_INPUT_ID, IK_INPUT_TYPE } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { useTextareaAutosize, useVModel } from '@vueuse/core'
@@ -63,22 +64,19 @@ import { computed, type HTMLAttributes, inject, nextTick, ref, useAttrs, watch }
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    modelValue?: any
-    color?: Color
-    before?: IconDefinition | string
-    after?: IconDefinition | string
-    beforeWidth?: string
-    afterWidth?: string
-    disabled?: boolean
-    required?: boolean
-    right?: boolean
-    wrapperAttrs?: HTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  id?: string
+  modelValue?: any
+  color?: Color
+  before?: IconDefinition | string
+  after?: IconDefinition | string
+  beforeWidth?: string
+  afterWidth?: string
+  disabled?: boolean
+  required?: boolean
+  right?: boolean
+  wrapperAttrs?: HTMLAttributes
+}>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: any]
@@ -94,7 +92,7 @@ const value = useVModel(props, 'modelValue', emit)
 const isEmpty = computed(() => props.modelValue == null || String(props.modelValue).trim() === '')
 const inputType = inject(IK_INPUT_TYPE, 'input')
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const wrapperClass = computed(() => [
   `form-${inputType}`,
diff --git a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
index c43e3b6f83e..7c53c03c776 100644
--- a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
@@ -36,28 +36,26 @@
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_FORM_HAS_LABEL, IK_INPUT_ID } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { uniqueId } from 'lodash-es'
 import { computed, provide, useSlots } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    id?: string
-    icon?: IconDefinition
-    learnMoreUrl?: string
-    warning?: string
-    error?: string
-    help?: string
-    disabled?: boolean
-    light?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  label?: string
+  id?: string
+  icon?: IconDefinition
+  learnMoreUrl?: string
+  warning?: string
+  error?: string
+  help?: string
+  disabled?: boolean
+  light?: boolean
+}>()
 
 const slots = useSlots()
 
@@ -82,7 +80,7 @@ provide(
 )
 
 useContext(ColorContext, color)
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/lite/src/components/ui/UiActionButton.vue b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
index a63d71fad7c..1c2c7ac7f14 100644
--- a/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
@@ -17,21 +17,17 @@
 
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useContext } from '@/composables/context.composable'
-import { DisabledContext } from '@/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-const props = withDefaults(
-  defineProps<{
-    busy?: boolean
-    disabled?: boolean
-    icon?: IconDefinition
-    active?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  busy?: boolean
+  disabled?: boolean
+  icon?: IconDefinition
+  active?: boolean
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
index 67c4e0b6f23..1a4e53cc903 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
@@ -8,9 +8,10 @@
 
 <script lang="ts" setup>
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_MODAL } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { inject, useAttrs } from 'vue'
 
@@ -28,7 +29,7 @@ const attrs = useAttrs()
 const modal = inject(IK_MODAL)!
 
 useContext(ColorContext, () => props.color)
-useContext(DisabledContext, () => props.disabled || modal.isBusy)
+useDisabled(() => props.disabled || modal.isBusy)
 
 const { escape } = useMagicKeys()
 
diff --git a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
index 446b2875ec8..42fa5086090 100644
--- a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
@@ -12,14 +12,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@/composables/context.composable'
 import { useModal } from '@/composables/modal.composable'
-import { DisabledContext } from '@/context'
 import { areSomeVmOperationAllowed } from '@/libs/vm'
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -31,13 +30,11 @@ const props = defineProps<{
 
 const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const isParentDisabled = useContext(DisabledContext)
-
 const isSomeExportable = computed(() =>
   getByOpaqueRefs(props.vmRefs).some(vm => areSomeVmOperationAllowed(vm, VM_OPERATION.EXPORT))
 )
 
-const isDisabled = computed(() => isParentDisabled.value || !isSomeExportable.value)
+const isDisabled = useDisabled(() => !isSomeExportable.value)
 
 const openModal = () => {
   useModal(() => import('@/components/modals/VmExportModal.vue'), {
diff --git a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
index b36d302546d..61de97a5c3b 100644
--- a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
@@ -6,7 +6,7 @@
       $t(isSingleAction ? 'this-vm-cant-be-migrated' : 'no-selected-vm-can-be-migrated')
     "
     :busy="isMigrating"
-    :disabled="isParentDisabled || !isMigratable"
+    :disabled="isDisabled"
     :icon="faRoute"
     @click="openModal()"
   >
@@ -15,14 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@/composables/context.composable'
 import { useModal } from '@/composables/modal.composable'
-import { DisabledContext } from '@/context'
 import { areSomeVmOperationAllowed, isVmOperationPending } from '@/libs/vm'
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faRoute } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -34,8 +33,6 @@ const props = defineProps<{
 
 const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const isParentDisabled = useContext(DisabledContext)
-
 const isMigratable = computed(() =>
   getByOpaqueRefs(props.selectedRefs).some(vm =>
     areSomeVmOperationAllowed(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND])
@@ -48,6 +45,8 @@ const isMigrating = computed(() =>
   )
 )
 
+const isDisabled = useDisabled(() => !isMigratable.value)
+
 const openModal = () =>
   useModal(() => import('@/components/modals/VmMigrateModal.vue'), {
     vmRefs: props.selectedRefs,
diff --git a/@xen-orchestra/lite/src/context.ts b/@xen-orchestra/lite/src/context.ts
index 6d278574202..b9f6b24af25 100644
--- a/@xen-orchestra/lite/src/context.ts
+++ b/@xen-orchestra/lite/src/context.ts
@@ -2,8 +2,6 @@ import { createContext } from '@/composables/context.composable'
 import type { Color } from '@/types'
 import { computed } from 'vue'
 
-export const DisabledContext = createContext(false)
-
 export const ColorContext = createContext('info' as Color, color => ({
   name: color,
   textClass: computed(() => `context-color-${color.value}`),
diff --git a/@xen-orchestra/web-core/docs/composables/context.composable.md b/@xen-orchestra/web-core/docs/composables/context.composable.md
deleted file mode 100644
index e390676fa56..00000000000
--- a/@xen-orchestra/web-core/docs/composables/context.composable.md
+++ /dev/null
@@ -1,158 +0,0 @@
-<!-- TOC -->
-
-- [Overview](#overview)
-  - [Simple Context](#simple-context)
-    - [1. Create the context](#1-create-the-context)
-    - [2. Use the context](#2-use-the-context)
-      - [2.1. Read](#21-read)
-      - [2.2. Update](#22-update)
-  - [Advanced Context](#advanced-context)
-    - [1. Create the context](#1-create-the-context-1)
-    - [2. Use the context](#2-use-the-context-1)
-      - [2.1. Read](#21-read-1)
-      - [2.2. Update](#22-update-1)
-  - [Caveats (boolean props)](#caveats-boolean-props)
-  <!-- TOC -->
-
-# Overview
-
-`createContext` lets you create a context that is both readable and writable, and is accessible by a component and all
-its descendants at any depth.
-
-Each descendant has the ability to change the context value, affecting itself and all of its descendants at any level.
-
-## Simple Context
-
-### 1. Create the context
-
-`createContext` takes the initial context value as first argument.
-
-```ts
-// context.ts
-
-const CounterContext = createContext(0)
-```
-
-### 2. Use the context
-
-#### 2.1. Read
-
-You can get the current Context value by using `useContext(CounterContext)`.
-
-```ts
-const counter = useContext(CounterContext)
-
-console.log(counter.value) // 0
-```
-
-#### 2.2. Update
-
-You can pass a `MaybeRefOrGetter` as second argument to update the context value.
-
-```ts
-// MyComponent.vue
-
-const props = defineProps<{
-  counter?: number
-}>()
-
-const counter = useContext(CounterContext, () => props.counter)
-
-// When calling <MyComponent />
-console.log(counter.value) // 0
-
-// When calling <MyComponent :counter="20" />
-console.log(counter.value) // 20
-```
-
-## Advanced Context
-
-To customize the context output, you can pass a custom context builder as the second argument of `createContext`.
-
-### 1. Create the context
-
-```ts
-// context.ts
-
-// Example 1. Return a object
-const CounterContext = createContext(10, counter => ({
-  counter,
-  isEven: computed(() => counter.value % 2 === 0),
-}))
-
-// Example 2. Return a computed value
-const DoubleContext = createContext(10, num => computed(() => num.value * 2))
-
-// Example 3. Use a previous value
-const ColorContext = createContext('info' as Color, (color, previousColor) => ({
-  name: color,
-  colorContextClass: computed(() => (previousColor.value === color.value ? undefined : `color-context-${color.value}`)),
-}))
-```
-
-### 2. Use the context
-
-#### 2.1. Read
-
-When using the context, it will return your custom value.
-
-```ts
-const { counter, isEven } = useContext(CounterContext)
-const double = useContext(DoubleContext)
-
-console.log(counter.value) // 10
-console.log(isEven.value) // true
-console.log(double.value) // 20
-```
-
-#### 2.2. Update
-
-Same as with a simple context, you can pass a `MaybeRefOrGetter` as second argument.
-
-```ts
-// Parent.vue
-useContext(CounterContext, 99)
-useContext(DoubleContext, 99)
-
-// Child.vue
-const { isEven } = useContext(CounterContext)
-const double = useContext(DoubleContext)
-
-console.log(isEven.value) // false
-console.log(double.value) // 198
-```
-
-## Caveats (boolean props)
-
-When working with `boolean` props, there's an important caveat to be aware of.
-
-If the `MaybeRefOrGetter` returns any other value than `undefined`, the context will be updated according to this value.
-
-This could be problematic if the value comes from a `boolean` prop.
-
-```ts
-const props = defineProps<{
-  disabled?: boolean
-}>()
-
-useContext(MyBooleanContext, () => props.disabled) // Update to `false` if `undefined`
-```
-
-In that case, Vue will automatically set the default value for `disabled` prop to `false`.
-
-Even if the `disabled` prop in not provided at all, the current context will not be used and will be replaced
-by `false`.
-
-To circumvent this issue, you need to use `withDefaults` and specifically set the default value for `boolean` props
-to `undefined`:
-
-```ts
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
-
-useContext(MyBoolean, () => props.disabled) // Keep parent value if `undefined`
-```
diff --git a/@xen-orchestra/web-core/docs/contexts/color-context.md b/@xen-orchestra/web-core/docs/contexts/color-context.md
deleted file mode 100644
index a489d05dc87..00000000000
--- a/@xen-orchestra/web-core/docs/contexts/color-context.md
+++ /dev/null
@@ -1,150 +0,0 @@
-> [!CAUTION]
->
-> **DEPRECATED**
->
-> ColorContext has been deprecated and shouldn’t be used anymore.
->
-> It will be removed in the future.
-
-<!-- TOC -->
-
-- [Overview](#overview)
-  - [CSS variables](#css-variables)
-  - [Available color contexts](#available-color-contexts)
-  - [Usage](#usage)
-  <!-- TOC -->
-
-# Overview
-
-The color context provides a way to apply a set of colors variants to a component and all its descendants at any depth.
-
-Each descendant has the ability to change the context value, affecting itself and all of its descendants at any level.
-
-The purpose is to colorize a component and its descendants by applying a single CSS class on the parent component (e.g., applying the class on a modal component container will style all children components using the context).
-
-## CSS variables
-
-The color context relies on the usage of the following variables:
-
-```css
---color-context-primary;
---color-context-primary-hover;
---color-context-primary-active;
---color-context-primary-disabled;
-
---color-context-secondary;
---color-context-secondary-hover;
---color-context-secondary-active;
-
---color-context-tertiary;
-```
-
-Any component can use these variables for `color`, `background-color` or any other CSS property, to be usable with the color context.
-
-When you set a color context, the variables are updated with the help of CSS classes defined in `_context.pcss`:
-
-```css
-.color-context-info {
-  --color-context-primary: var(--color-info-txt-base);
-  --color-context-primary-hover: var(--color-info-txt-hover);
-  --color-context-primary-active: var(--color-info-txt-active);
-  --color-context-primary-disabled: var(--color-neutral-txt-secondary);
-
-  --color-context-secondary: var(--color-info-background-selected);
-  --color-context-secondary-hover: var(--color-info-background-hover);
-  --color-context-secondary-active: var(--color-info-background-active);
-}
-
-.color-context-success {
-  --color-context-primary: var(--color-success-txt-base);
-  --color-context-primary-hover: var(--color-success-txt-hover);
-  /*...*/
-}
-```
-
-You can add any other context by adding a `color-context-<my-context>` class and setting the desired values for the variables.
-
-**Important note: remember to set a value for all variables to avoid any missing styles.**
-
-## Available color contexts
-
-Color contexts rely on the type `Color` defined in `/lib/types/color.type.ts`:
-
-- `info` (_purple_)
-- `success` (_green_)
-- `warning` (_orange_)
-- `error` (_red_)
-
-## Usage
-
-To get and set the color context in a component, you can pass the `ColorContext` to `useContext` and apply the `colorContextClass` to the root component:
-
-```ts
-// ParentComponent.vue
-
-import { useContext } from '@core/composables/context.composable'
-import { ColorContext } from '@core/context'
-import type { Color } from '@core/types/color.type'
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  color?: Color
-}>()
-
-const { colorContextClass } = useContext(ColorContext, () => props.color)
-```
-
-All the components using the CSS variables will inherit the color context applied by the `colorContextClass`.
-It's possible to change the color of a component on demand, if the component has a `color` prop, and passing it as the second parameter of the composable.
-
-Then, the only thing to do is to apply the class in the component's `template`:
-
-```vue
-<!-- ParentComponent.vue -->
-
-<template>
-  <div :class="colorContextClass">
-    <!--  Will use the color context defined by the class above-->
-    <MyComponent />
-
-    <!--  Will use the color "info" instead of the context-->
-    <MyComponent color="info" />
-  </div>
-</template>
-```
-
-`MyComponent` using the context:
-
-```vue
-<!-- MyComponent.vue -->
-
-<template>
-  <div :class="colorContextClass" class="my-component">
-    <p>Lorem ipsum dolor sit amet.</p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { ColorContext } from '@core/context'
-import type { Color } from '@core/types/color.type'
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  color?: Color
-}>()
-
-const { colorContextClass } = useContext(ColorContext, () => props.color)
-</script>
-
-<style lang="postcss" scoped>
-.my-component {
-  background-color: var(--color-context-secondary);
-  color: var(--color-context-primary);
-}
-</style>
-```
-
-In the example above, if the `color` prop is not set, the component will use the color context (i.e., if its parent uses a `success` color context, `MyComponent` will be styled with the `success` colors defined in `_context.pcss`).
-
-If the `color` prop is set, the component will use the prop value to update the context for itself and its descendants.
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
index fd9fb27d288..33de9c364e0 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
@@ -27,28 +27,24 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { computed, inject, ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    icon?: IconDefinition
-    onClick?: () => any
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  icon?: IconDefinition
+  onClick?: () => any
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const isParentHorizontal = inject(
   IK_MENU_HORIZONTAL,
   computed(() => false)
 )
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const submenuIcon = computed(() => (isParentHorizontal.value ? faAngleDown : faAngleRight))
 
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
index e3e28ee3f87..c2190a6b7e6 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
 import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
@@ -20,15 +19,12 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    horizontal?: boolean
-    border?: boolean
-    disabled?: boolean
-    placement?: Options['placement']
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  horizontal?: boolean
+  border?: boolean
+  disabled?: boolean
+  placement?: Options['placement']
+}>()
 
 const slots = useSlots()
 const isOpen = ref(false)
@@ -42,7 +38,7 @@ provide(
   computed(() => props.horizontal ?? false)
 )
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 
 let clearClickOutsideEvent: (() => void) | undefined
 
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
index 7b60d861142..67b22108070 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { useUiStore } from '@core/stores/ui.store'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -18,12 +17,12 @@ const props = withDefaults(
     active?: boolean
     tag?: string
   }>(),
-  { tag: 'span', disabled: undefined }
+  { tag: 'span' }
 )
 
 const { isMobile } = storeToRefs(useUiStore())
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => {
   return [
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabList.vue b/@xen-orchestra/web-core/lib/components/tab/TabList.vue
index c515828d658..d3d7d55ef4e 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabList.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/TabList.vue
@@ -6,17 +6,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  disabled?: boolean
+}>()
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
index 4035fb6f573..8ba64ac81c2 100644
--- a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
@@ -9,8 +9,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faLock } from '@fortawesome/free-solid-svg-icons'
@@ -20,26 +19,21 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
 type ButtonAccent = 'info' | 'success' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    variant: ButtonVariant
-    accent: ButtonAccent
-    size: ButtonSize
-    busy?: boolean
-    disabled?: boolean
-    lockIcon?: boolean
-    leftIcon?: IconDefinition
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const props = defineProps<{
+  variant: ButtonVariant
+  accent: ButtonAccent
+  size: ButtonSize
+  busy?: boolean
+  disabled?: boolean
+  lockIcon?: boolean
+  leftIcon?: IconDefinition
+}>()
 
 defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const fontClasses = {
   small: 'typo p3-medium',
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
index 8b1bdaf05b3..bc8860c6d8a 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -1,16 +1,16 @@
 <!-- v3 -->
 <template>
-  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+  <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
     <input
       v-model="checkboxModel"
       :class="{ indeterminate: isIndeterminate }"
       :disabled="isDisabled"
-      type="checkbox"
       class="input"
+      type="checkbox"
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon class="icon" accent="info" />
+      <VtsIcon :icon accent="info" class="icon" />
     </span>
     <span v-if="slots.default" class="typo p1-regular">
       <slot />
@@ -24,8 +24,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
@@ -34,14 +33,11 @@ type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    accent: CheckboxAccent
-    disabled?: boolean
-    wrapperAttrs?: LabelHTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  accent: CheckboxAccent
+  disabled?: boolean
+  wrapperAttrs?: LabelHTMLAttributes
+}>()
 
 const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
 
@@ -50,7 +46,7 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => [
   toVariants({
diff --git a/@xen-orchestra/web-core/lib/composables/disabled.composable.ts b/@xen-orchestra/web-core/lib/composables/disabled.composable.ts
new file mode 100644
index 00000000000..6c0ccfbb06c
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/composables/disabled.composable.ts
@@ -0,0 +1,15 @@
+import { IK_DISABLED } from '@core/utils/injection-keys.util'
+import { computed, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'
+
+export function useDisabled(condition?: MaybeRefOrGetter<boolean>) {
+  const previousValue = inject(
+    IK_DISABLED,
+    computed(() => false)
+  )
+
+  const currentValue = computed(() => previousValue.value || toValue(condition ?? false))
+
+  provide(IK_DISABLED, currentValue)
+
+  return currentValue
+}
diff --git a/@xen-orchestra/web-core/lib/context.ts b/@xen-orchestra/web-core/lib/context.ts
deleted file mode 100644
index 4c060d25bac..00000000000
--- a/@xen-orchestra/web-core/lib/context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createContext } from '@core/composables/context.composable'
-import type { Color } from '@core/types/color.type'
-import { computed } from 'vue'
-
-export const DisabledContext = createContext(false)
-
-export const ColorContext = createContext('info' as Color, (color, previousColor) => ({
-  name: color,
-  colorContextClass: computed(() => (previousColor.value === color.value ? undefined : `color-context-${color.value}`)),
-}))
diff --git a/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts b/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
index c5f8c5974b6..f8623413a0e 100644
--- a/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
+++ b/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
@@ -15,3 +15,5 @@ export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<C
 export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
 
 export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<boolean>
+
+export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boolean>>
diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
index 9d4ee7ac3a2..004f4fb6e7d 100644
--- a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
+++ b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
@@ -13,8 +13,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
@@ -22,7 +21,7 @@ defineProps<{
   active?: boolean
 }>()
 
-const isDisabled = useContext(DisabledContext)
+const isDisabled = useDisabled()
 </script>
 
 <style lang="postcss" scoped>