diff --git a/ui/src/Components/ManagedSilence/DeleteSilence.js b/ui/src/Components/ManagedSilence/DeleteSilence.js
index ecac4df05..aeed69c02 100644
--- a/ui/src/Components/ManagedSilence/DeleteSilence.js
+++ b/ui/src/Components/ManagedSilence/DeleteSilence.js
@@ -306,7 +306,9 @@ const DeleteSilence = observer(
           <button
             className="btn btn-danger btn-sm"
             disabled={members.length === 0}
-            onClick={members.length && this.toggle.toggle}
+            onClick={() => {
+              members.length > 0 && this.toggle.toggle();
+            }}
           >
             <FontAwesomeIcon
               className="mr-1 d-none d-sm-inline-block"
diff --git a/ui/src/Components/ManagedSilence/DeleteSilence.test.js b/ui/src/Components/ManagedSilence/DeleteSilence.test.js
index 479104ba1..edec8da27 100644
--- a/ui/src/Components/ManagedSilence/DeleteSilence.test.js
+++ b/ui/src/Components/ManagedSilence/DeleteSilence.test.js
@@ -107,6 +107,18 @@ describe("<DeleteSilence />", () => {
       .simulate("click");
     expect(tree.find(".modal-body")).toHaveLength(1);
   });
+
+  it("button is disabled when all alertmanager instances are read-only", () => {
+    alertStore.data.upstreams.instances[0].readonly = true;
+    const tree = MountedDeleteSilence();
+    expect(tree.find("button").prop("disabled")).toBe(true);
+
+    tree
+      .find("button")
+      .at(0)
+      .simulate("click");
+    expect(tree.find(".modal-body")).toHaveLength(0);
+  });
 });
 
 describe("<DeleteSilenceModalContent />", () => {
diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.js b/ui/src/Components/ManagedSilence/SilenceDetails.js
index 68a9fffa6..16af09df6 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.js
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.js
@@ -159,7 +159,9 @@ const SilenceDetails = ({
             <button
               className="btn btn-primary btn-sm mb-lg-2 mb-0"
               disabled={isReadOnly}
-              onClick={!isReadOnly && onEditSilence}
+              onClick={() => {
+                !isReadOnly && onEditSilence();
+              }}
             >
               <FontAwesomeIcon
                 className="mr-1 d-none d-sm-inline-block"
diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.test.js b/ui/src/Components/ManagedSilence/SilenceDetails.test.js
index dda44c93a..5695bd2e1 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.test.js
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.test.js
@@ -95,4 +95,16 @@ describe("<SilenceDetails />", () => {
     expect(copy).toHaveBeenCalledTimes(1);
     expect(copy).toHaveBeenCalledWith(silence.id);
   });
+
+  it("Edit silence button is disabled when all alertmanager instances are read-only", () => {
+    alertStore.data.upstreams.instances[0].readonly = true;
+    const tree = MountedSilenceDetails();
+    expect(tree.find("button").prop("disabled")).toBe(true);
+
+    tree
+      .find("button")
+      .at(0)
+      .simulate("click");
+    expect(tree.find(".modal-body")).toHaveLength(0);
+  });
 });