diff --git a/doc/qtcreator/images/qtquick-states-binding-editor-not.png b/doc/qtcreator/images/qtquick-states-binding-editor-not.png
new file mode 100644
index 00000000000..334ddec39e6
Binary files /dev/null and b/doc/qtcreator/images/qtquick-states-binding-editor-not.png differ
diff --git a/doc/qtcreator/images/qtquick-states-binding-editor.png b/doc/qtcreator/images/qtquick-states-binding-editor.png
index 57be12f0ec2..8d57b724e18 100644
Binary files a/doc/qtcreator/images/qtquick-states-binding-editor.png and b/doc/qtcreator/images/qtquick-states-binding-editor.png differ
diff --git a/doc/qtcreator/src/qtquick/creator-logical-operators.qdocinc b/doc/qtcreator/src/qtquick/creator-logical-operators.qdocinc
new file mode 100644
index 00000000000..a8bd94c4621
--- /dev/null
+++ b/doc/qtcreator/src/qtquick/creator-logical-operators.qdocinc
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+//! [logical operators]
+    \section2 Summary of Logical Operators
+
+    You can use the following
+    \l{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators}
+    {logical operators} in the expressions to combine several conditions in one
+    expression:
+
+    \table
+        \header
+            \li Operator
+            \li Meaning
+            \li Evaluates to \c true if
+        \row
+            \li !
+            \li NOT
+            \li The condition is not met.
+        \row
+            \li &&
+            \li AND
+            \li Both conditions are met.
+        \row
+            \li ||
+            \li OR
+            \li Either of the conditions is met.
+        \row
+            \li <
+            \li Less than
+            \li The left operand is less than the right operand.
+        \row
+            \li >
+            \li Greater than
+            \li The left operand is greater than the right operand.
+        \row
+            \li >=
+            \li Greater than or equal
+            \li The left operand is greater than or equal to the right operand.
+        \row
+            \li <=
+            \li Less than or equal
+            \li The left operand is less than or equal to the right operand.
+        \row
+            \li ==
+            \li Equal
+            \li The operands are equal.
+        \row
+            \li ===
+            \li Strict equal
+            \li The operands are equal and of the same type.
+        \row
+            \li !=
+            \li Not equal
+            \li The operands are not equal.
+        \row
+            \li !==
+            \li Strict not equal
+            \li The operands are of the same type but not equal, or are of
+                different type.
+    \endtable
+
+    In addition, you can use arithmetic operators to compare numbers before
+    checks. However, we recommend that you create separate properties for this
+    purpose whenever possible.
+//! [logical operators]
+*/
diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
index d3139ce23b9..b0d2751b08f 100644
--- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
@@ -71,4 +71,7 @@
     \uicontrol {Binding Editor}. For more information, see \l{Setting Bindings}.
 
     \image qmldesigner-binding-editor.png "Binding Editor"
+
+    \include creator-logical-operators.qdocinc logical operators
+
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc
index 0c5247b8432..5e17e6f7083 100644
--- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc
@@ -125,68 +125,7 @@
     \l{Completing Code}{code completion} feature lists the components and
     their properties you can use in the expressions.
 
-    \section2 Summary of Logical Operators
-
-    You can use the following
-    \l{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators}
-    {logical operators} in the expressions to combine several conditions in one
-    expression:
-
-    \table
-        \header
-            \li Operator
-            \li Meaning
-            \li Evaluates to \c true if
-        \row
-            \li !
-            \li NOT
-            \li The condition is not met.
-        \row
-            \li &&
-            \li AND
-            \li Both conditions are met.
-        \row
-            \li ||
-            \li OR
-            \li Either of the conditions is met.
-        \row
-            \li <
-            \li Less than
-            \li The left operand is less than the right operand.
-        \row
-            \li >
-            \li Greater than
-            \li The left operand is greater than the right operand.
-        \row
-            \li >=
-            \li Greater than or equal
-            \li The left operand is greater than or equal to the right operand.
-        \row
-            \li <=
-            \li Less than or equal
-            \li The left operand is less than or equal to the right operand.
-        \row
-            \li ==
-            \li Equal
-            \li The operands are equal.
-        \row
-            \li ===
-            \li Strict equal
-            \li The operands are equal and of the same type.
-        \row
-            \li !=
-            \li Not equal
-            \li The operands are not equal.
-        \row
-            \li !==
-            \li Strict not equal
-            \li The operands are of the same type but not equal, or are of
-                different type.
-    \endtable
-
-    In addition, you can use arithmetic operators to compare numbers before
-    checks. However, we recommend that you create separate properties for this
-    purpose whenever possible.
+    \include creator-logical-operators.qdocinc logical operators
 
     \section2 Examples of when Conditions
 
@@ -197,6 +136,11 @@
     when: control.pressed
     \endcode
 
+    To apply a state when the button is not pressed, select the \uicontrol NOT
+    check box.
+
+    \image qtquick-states-binding-editor-not.png "NOT check box in Binding Editor"
+
     To apply a state when the button is not pressed, selected, nor hovered on,
     you could combine conditions, as follows: