diff --git a/css/backoffice/components/_button.scss b/css/backoffice/components/_button.scss
index cb1823d2a..f08282151 100644
--- a/css/backoffice/components/_button.scss
+++ b/css/backoffice/components/_button.scss
@@ -23,6 +23,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				),
 				'primary': (
 						'': (
@@ -40,6 +45,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-primary-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-600,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				),
 				'secondary': (
 						'': (
@@ -57,6 +67,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				),
 				'red': (
 						'': (
@@ -74,6 +89,11 @@ $ibo-button-colors: (
 								$ibo-color-white-100,
 								$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				),
 				'green': (
 						'': (
@@ -91,6 +111,11 @@ $ibo-button-colors: (
 								$ibo-color-white-100,
 								$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				),
 				'cyan': (
 						'': (
@@ -108,6 +133,11 @@ $ibo-button-colors: (
 								$ibo-color-white-100,
 								$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
 						),
+						':disabled': (
+								$ibo-color-grey-300,
+								$ibo-color-grey-700,
+								$ibo-button--box-shadow-top $ibo-color-grey-300,
+						),
 				)
 		),
 		'alternative': (
@@ -127,6 +157,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 				'primary': (
 						'': (
@@ -144,6 +179,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-primary-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-300,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 				'secondary': (
 						'': (
@@ -161,6 +201,11 @@ $ibo-button-colors: (
 								$ibo-color-grey-900,
 								$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 				'red': (
 						'': (
@@ -178,6 +223,11 @@ $ibo-button-colors: (
 								$ibo-color-red-900,
 								$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 				'green': (
 						'': (
@@ -195,6 +245,11 @@ $ibo-button-colors: (
 								$ibo-color-green-900,
 								$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 				'cyan': (
 						'': (
@@ -212,6 +267,11 @@ $ibo-button-colors: (
 								$ibo-color-cyan-900,
 								$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
 						),
+						':disabled': (
+								transparent,
+								$ibo-color-grey-600,
+								$ibo-button--box-shadow-top transparent,
+						),
 				),
 		)
 ) !default;
diff --git a/sources/application/UI/Component/Button/Button.php b/sources/application/UI/Component/Button/Button.php
index d214e03c3..f216a8d08 100644
--- a/sources/application/UI/Component/Button/Button.php
+++ b/sources/application/UI/Component/Button/Button.php
@@ -88,6 +88,8 @@ class Button extends UIBlock
 	protected $sActionType;
 	/** @var string $sColor */
 	protected $sColor;
+	/** @var bool $bIsDisabled */
+	protected $bIsDisabled;
 	/** @var string $sJsCode */
 	protected $sJsCode;
 	/** @var string $sOnClickJsCode */
@@ -124,6 +126,7 @@ class Button extends UIBlock
 		$this->sColor = $sColor;
 		$this->sJsCode = $sJsCode;
 		$this->sOnClickJsCode = $sOnClickJsCode;
+		$this->bIsDisabled = false;
 
 		parent::__construct($sId);
 	}
@@ -281,7 +284,24 @@ class Button extends UIBlock
 		return $this;
 	}
 
+	/**
+	 * @return bool
+	 */
+	public function IsDisabled()
+	{
+		return $this->bIsDisabled;
+	}
 
+	/**
+	 * @param bool $bIsDisabled
+	 *
+	 * @return $this
+	 */
+	public function SetIsDisabled(bool $bIsDisabled)
+	{
+		$this->bIsDisabled = $bIsDisabled;
+		return $this;
+	}
 	/**
 	 * @return string
 	 */
diff --git a/templates/components/button/layout.html.twig b/templates/components/button/layout.html.twig
index 8c09ec2fe..31f24c94c 100644
--- a/templates/components/button/layout.html.twig
+++ b/templates/components/button/layout.html.twig
@@ -1,4 +1,10 @@
-<button id="{{ oUIBlock.GetId() }}" class="ibo-button ibo-is-{{ oUIBlock.GetActionType()}} ibo-is-{{ oUIBlock.GetColor() }}" type="{{ oUIBlock.GetType() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue() }}">
+<button id="{{ oUIBlock.GetId() }}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType()}} ibo-is-{{ oUIBlock.GetColor() }}"
+        type="{{ oUIBlock.GetType() }}"
+        name="{{ oUIBlock.GetName() }}"
+        value="{{ oUIBlock.GetValue() }}"
+		{% if oUIBlock.IsDisabled() is same as(true) %} disabled {% endif %}
+>
     {% if oUIBlock.GetIconClass() is not empty %}
       <span class="ibo-button-icon {{ oUIBlock.GetIconClass() }}"></span>
     {% endif %}
diff --git a/test/VisualTest/Backoffice/RenderAllUiBlocks.php b/test/VisualTest/Backoffice/RenderAllUiBlocks.php
index 7acffc4ee..5ba2c3a40 100644
--- a/test/VisualTest/Backoffice/RenderAllUiBlocks.php
+++ b/test/VisualTest/Backoffice/RenderAllUiBlocks.php
@@ -57,15 +57,25 @@ $oPageContentLayout->AddMainBlock(new Html('<hr/>'));
 // Buttons
 //////////
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeNeutral('Neutral', 'neutral'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeNeutral('Neutral', 'neutral')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForPrimaryAction('Primary'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForPrimaryAction('Primary')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForSecondaryAction('Secondary'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForSecondaryAction('Secondary')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForValidationAction('Validation'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForValidationAction('Validation')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForDestructiveAction('Destructive'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForDestructiveAction('Destructive')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeAlternativeNeutral('Alt. neutral', 'alt-neutral'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeAlternativeNeutral('Alt. neutral', 'alt-neutral')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativePrimaryAction('Alt. primary'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativePrimaryAction('Alt. primary')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeSecondaryAction('Alt. secondary'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeSecondaryAction('Alt. secondary')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeValidationAction('Alt. validation'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeValidationAction('Alt. validation')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeDestructiveAction('Alt. destructive'));
+$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeDestructiveAction('Alt. destructive')->SetIsDisabled(true));
 
 $oPageContentLayout->AddMainBlock(new Html('<hr/>'));