diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.mdx b/packages/grafana-ui/src/components/FilterPill/FilterPill.mdx
new file mode 100644
index 00000000000..0a636326ae8
--- /dev/null
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.mdx
@@ -0,0 +1,17 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { FilterPill } from './FilterPill';
+
+# FilterPill
+
+A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.
+
+### Usage
+
+```jsx
+import { FilterPill } from '@grafana/ui';
+
+<FilterPill label={'Test'} onClick={() => console.log('toggle')}/>
+```
+
+### Props
+<Props of={FilterPill} />
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
new file mode 100644
index 00000000000..1db95545918
--- /dev/null
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { FilterPill, FilterPillProps } from './FilterPill';
+import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
+import mdx from './FilterPill.mdx';
+import { getAvailableIcons } from '../../types';
+
+export default {
+  title: 'General/FilterPill',
+  component: FilterPill,
+  decorators: [withCenteredStory],
+  argTypes: {
+    icon: { control: { type: 'select', options: getAvailableIcons() } },
+    onClick: { action: 'Pill Clicked' },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Basic: Story<FilterPillProps> = args => {
+  return <FilterPill {...args} />;
+};
+
+Basic.args = {
+  selected: false,
+  label: 'Test',
+  icon: undefined,
+};
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index 1f0b6202efa..82bd7c38e32 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
@@ -5,7 +5,7 @@ import { css } from 'emotion';
 import { IconButton } from '../IconButton/IconButton';
 import { IconName } from '../../types';
 
-interface FilterPillProps {
+export interface FilterPillProps {
   selected: boolean;
   label: string;
   onClick: React.MouseEventHandler<HTMLElement>;
@@ -39,7 +39,6 @@ const getFilterPillStyles = stylesFactory((theme: GrafanaTheme, isSelected: bool
       padding: ${theme.spacing.xxs} ${theme.spacing.sm};
       background: ${theme.colors.bg2};
       border-radius: ${theme.border.radius.sm};
-      display: inline-block;
       padding: 0 ${theme.spacing.md} 0 ${theme.spacing.xs};
       font-weight: ${theme.typography.weight.semibold};
       font-size: ${theme.typography.size.sm};