diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx
deleted file mode 100644
index 2fdf324ac44..00000000000
--- a/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { PureComponent } from 'react';
-
-interface ToggleButtonProps {
-  onChange?: (value) => void;
-  selected?: boolean;
-  value: any;
-  classNames?: string;
-}
-interface ToggleButtonState {}
-
-export default class ToggleButton extends PureComponent<ToggleButtonProps, ToggleButtonState> {
-  static defaultProps = {
-    classNames: '',
-  };
-
-  handleChange = () => {
-    const { onChange, value } = this.props;
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  render() {
-    const { children, selected, classNames } = this.props;
-    const btnClassName = `btn ${classNames} ${selected ? 'active' : ''}`;
-
-    return (
-      <button className={btnClassName} onClick={this.handleChange}>
-        <span>{children}</span>
-      </button>
-    );
-  }
-}
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index b3063004ebd..91b7f1538c9 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
 
 interface ToggleButtonGroupProps {
   onChange: (value) => void;
@@ -9,7 +9,12 @@ interface ToggleButtonGroupProps {
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
   getValues() {
     const { children } = this.props;
-    return React.Children.toArray(children).map(c => c['props'].value);
+    return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
+  }
+
+  smallChildren() {
+    const { children } = this.props;
+    return React.Children.toArray(children).every((c: ReactElement<any>) => c.props.className.includes('small'));
   }
 
   handleToggle(toggleValue) {
@@ -24,6 +29,7 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     const { children, value, label } = this.props;
     const values = this.getValues();
     const selectedValue = value || values[0];
+    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
 
     const childClones = React.Children.map(children, (child: ReactElement<any>) => {
       const { value: buttonValue } = child.props;
@@ -37,10 +43,34 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     return (
       <div className="gf-form">
         <div className="toggle-button-group">
-          {label && <label className="gf-form-label">{label}</label>}
+          {label && <label className={labelClassName}>{label}</label>}
           {childClones}
         </div>
       </div>
     );
   }
 }
+
+interface ToggleButtonProps {
+  onChange?: (value) => void;
+  selected?: boolean;
+  value: any;
+  className?: string;
+  children: ReactNode;
+}
+
+export const ToggleButton: SFC<ToggleButtonProps> = ({ children, selected, className = '', value, onChange }) => {
+  const handleChange = event => {
+    event.stopPropagation();
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
+  return (
+    <button className={btnClassName} onClick={handleChange}>
+      <span>{children}</span>
+    </button>
+  );
+};
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 3a584cd5664..f7704cf340a 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -16,6 +16,7 @@ import {
 } from 'app/core/logs_model';
 import { findHighlightChunksInText } from 'app/core/utils/text';
 import { Switch } from 'app/core/components/Switch/Switch';
+import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 import Graph from './Graph';
 import LogLabels from './LogLabels';
@@ -304,30 +305,13 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
-            <Switch
-              label="Dedup: off"
-              checked={dedup === LogsDedupStrategy.none}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.none)}
-              small
-            />
-            <Switch
-              label="Dedup: exact"
-              checked={dedup === LogsDedupStrategy.exact}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.exact)}
-              small
-            />
-            <Switch
-              label="Dedup: numbers"
-              checked={dedup === LogsDedupStrategy.numbers}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.numbers)}
-              small
-            />
-            <Switch
-              label="Dedup: signature"
-              checked={dedup === LogsDedupStrategy.signature}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.signature)}
-              small
-            />
+            <ToggleButtonGroup label="Dedup" onChange={this.onChangeDedup} value={dedup}>
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                <ToggleButton className="btn-small" key={i} value={dedupType}>
+                  {dedupType}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
             {hasData &&
               meta && (
                 <div className="logs-meta">
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index 5107c18f1a7..ed701a489a9 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -3,25 +3,35 @@
 
   .gf-form-label {
     background-color: $input-label-bg;
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+    &.small {
+      padding: ($input-padding-y / 2) ($input-padding-x / 2);
+      font-size: $font-size-xs;
+    }
   }
 
   .btn {
-    @include buttonBackground($input-bg, $input-bg);
+    background-color: $typeahead-selected-bg;
+    border-radius: 0;
+    color: $text-color;
     &.active {
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
+      background-color: $input-bg;
       &:hover {
         cursor: default;
       }
     }
-  }
 
-  &:first-child {
-    border-radius: 2px 0 0 2px;
-    margin: 0;
-  }
-  &:last-child {
-    border-radius: 0 2px 2px 0;
-    margin-left: 0 !important;
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius $border-radius 0;
+      margin-left: 0;
+    }
   }
 }