diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx
index 7d669771722..95c6966ab88 100644
--- a/public/app/features/alerting/AlertRuleItem.tsx
+++ b/public/app/features/alerting/AlertRuleItem.tsx
@@ -1,16 +1,21 @@
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 import Highlighter from 'react-highlight-words';
 import classNames from 'classnames/bind';
+import { togglePauseAlertRule } from './state/actions';
 import { AlertRule } from '../../types';
 
 export interface Props {
   rule: AlertRule;
   search: string;
+  togglePauseAlertRule: typeof togglePauseAlertRule;
 }
 
-export default class AlertRuleItem extends PureComponent<Props, any> {
-  toggleState = () => {
-    // this.props.rule.togglePaused();
+class AlertRuleItem extends PureComponent<Props, any> {
+  togglePaused = () => {
+    const { rule } = this.props;
+
+    this.props.togglePauseAlertRule(rule.id, { paused: rule.state === 'paused' });
   };
 
   renderText(text: string) {
@@ -56,7 +61,7 @@ export default class AlertRuleItem extends PureComponent<Props, any> {
           <button
             className="btn btn-small btn-inverse alert-list__btn width-2"
             title="Pausing an alert rule prevents it from executing"
-            onClick={this.toggleState}
+            onClick={this.togglePaused}
           >
             <i className={stateClass} />
           </button>
@@ -68,3 +73,7 @@ export default class AlertRuleItem extends PureComponent<Props, any> {
     );
   }
 }
+
+export default connect(null, {
+  togglePauseAlertRule,
+})(AlertRuleItem);
diff --git a/public/app/features/alerting/state/actions.ts b/public/app/features/alerting/state/actions.ts
index 3b80cb19c39..87afbfff665 100644
--- a/public/app/features/alerting/state/actions.ts
+++ b/public/app/features/alerting/state/actions.ts
@@ -1,6 +1,6 @@
 import { Dispatch } from 'redux';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import { AlertRule } from 'app/types';
+import { AlertRule, StoreState } from 'app/types';
 
 export enum ActionTypes {
   LoadAlertRules = 'LOAD_ALERT_RULES',
@@ -41,3 +41,19 @@ export const getAlertRulesAsync = (options: { state: string }) => async (
     throw error;
   }
 };
+
+export const togglePauseAlertRule = (id: number, options: { paused: boolean }) => async (
+  // Maybe fix dispatch type?
+  dispatch: Dispatch<any>,
+  getState: () => StoreState
+): Promise<boolean> => {
+  try {
+    await getBackendSrv().post(`/api/alerts/${id}/pause`, options);
+    const stateFilter = getState().location.query.state || 'all';
+    dispatch(getAlertRulesAsync({ state: stateFilter.toString() }));
+    return true;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};