diff --git a/public/app/core/components/Picker/GroupHeading.tsx b/public/app/core/components/Picker/GroupHeading.tsx
new file mode 100644
index 00000000000..76012ed3e7f
--- /dev/null
+++ b/public/app/core/components/Picker/GroupHeading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { components } from 'react-select';
+
+export const GroupHeading = props => {
+  return (
+    <label className="description-picker-option__button btn picker-option-group">
+      <components.GroupHeading {...props} />
+    </label>
+  );
+};
+
+export default GroupHeading;
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 404a212241b..3acb76e960d 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -105,6 +105,7 @@
 @import 'components/page_loader';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/group-heading';
 @import 'components/value-mappings';
 @import 'components/popover-box';
 
diff --git a/public/sass/components/_group-heading.scss b/public/sass/components/_group-heading.scss
new file mode 100644
index 00000000000..9656277d123
--- /dev/null
+++ b/public/sass/components/_group-heading.scss
@@ -0,0 +1,5 @@
+.picker-option-group {
+  cursor: default;
+  font-weight: $lead-font-weight;
+  color: $btn-primary-bg-hl;
+}