diff --git a/ui/cypress/e2e/dashboardsIndex.test.ts b/ui/cypress/e2e/dashboardsIndex.test.ts
index e80b1981d02..f6b1e815752 100644
--- a/ui/cypress/e2e/dashboardsIndex.test.ts
+++ b/ui/cypress/e2e/dashboardsIndex.test.ts
@@ -1,5 +1,9 @@
 import {Organization} from '@influxdata/influx'
 
+const newLabelName = 'click-me'
+const dashboardName = 'Bee Happy'
+const dashSearchName = 'bEE'
+
 describe('Dashboards', () => {
   beforeEach(() => {
     cy.flush()
@@ -20,9 +24,7 @@ describe('Dashboards', () => {
 
     cy.visit('/dashboards')
 
-    cy.getByTestID('resource-card')
-      .its('length')
-      .should('be.eq', 1)
+    cy.getByTestID('dashboard-card').should('have.length', 1)
   })
 
   it('can create a dashboard from the header', () => {
@@ -34,146 +36,162 @@ describe('Dashboards', () => {
 
     cy.visit('/dashboards')
 
-    cy.getByTestID('resource-card')
-      .its('length')
-      .should('be.eq', 1)
+    cy.getByTestID('dashboard-card').should('have.length', 1)
   })
 
-  it.skip('can delete a dashboard', () => {
-    cy.get<Organization>('@org').then(({id}) => {
-      cy.createDashboard(id)
-      cy.createDashboard(id)
-    })
+  describe('Dashboard List', () => {
+    beforeEach(() => {
+      cy.get<Organization>('@org').then(({id}) => {
+        cy.createDashboard(id, dashboardName).then(({body}) => {
+          cy.createAndAddLabel('dashboards', body.id, newLabelName)
+        })
 
-    cy.getByTestID('resource-card')
-      .its('length')
-      .should('eq', 2)
+        cy.createDashboard(id).then(({body}) => {
+          cy.createAndAddLabel('dashboards', body.id, 'bar')
+        })
+      })
 
-    cy.getByTestID('resource-card')
-      .first()
-      .trigger('mouseover')
-      .within(() => {
-        cy.getByTestID('context-delete-menu').click()
+      cy.visit('/dashboards')
+    })
 
-        cy.getByTestID('context-delete-dashboard').click()
-      })
+    it('can delete a dashboard', () => {
+      cy.getByTestID('dashboard-card').should('have.length', 2)
 
-    cy.getByTestID('resource-card')
-      .its('length')
-      .should('eq', 1)
-  })
+      cy.getByTestID('dashboard-card')
+        .first()
+        .trigger('mouseover')
+        .within(() => {
+          cy.getByTestID('context-delete-menu').click()
+          cy.getByTestID('context-delete-dashboard').click()
+        })
 
-  it('can edit a dashboards name', () => {
-    cy.get<Organization>('@org').then(({id}) => {
-      cy.createDashboard(id)
+      cy.getByTestID('dashboard-card').should('have.length', 1)
     })
 
-    const newName = 'new 🅱️ashboard'
+    it('can edit a dashboards name', () => {
+      const newName = 'new 🅱️ashboard'
 
-    cy.getByTestID('resource-card').within(() => {
-      cy.getByTestID('dashboard-card--name').trigger('mouseover')
+      cy.getByTestID('dashboard-card').within(() => {
+        cy.getByTestID('dashboard-card--name')
+          .first()
+          .trigger('mouseover')
 
-      cy.getByTestID('dashboard-card--name-button').click()
+        cy.getByTestID('dashboard-card--name-button')
+          .first()
+          .click()
 
-      cy.get('.input-field')
-        .type(newName)
-        .type('{enter}')
+        cy.get('.input-field')
+          .type(newName)
+          .type('{enter}')
+      })
+
+      cy.getByTestID('dashboard-card').should('contain', newName)
     })
 
-    cy.visit('/dashboards')
+    describe('Labeling', () => {
+      it('can click to filter dashboard labels', () => {
+        cy.getByTestID('dashboard-card').should('have.length', 2)
 
-    cy.getByTestID('resource-card').should('contain', newName)
-  })
+        cy.getByTestID(`label--pill ${newLabelName}`).click()
 
-  describe('labeling', () => {
-    it('can click to filter dashboard labels', () => {
-      const newLabelName = 'click-me'
-
-      cy.get<Organization>('@org').then(({id}) => {
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, newLabelName)
-        })
-
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, 'bar')
-        })
+        cy.getByTestID('dashboard-card')
+          .should('have.length', 1)
+          .and('contain', newLabelName)
       })
 
-      cy.visit('/dashboards')
+      it('can delete a label from a dashboard', () => {
+        cy.getByTestID('dashboard-card')
+          .first()
+          .within(() => {
+            const pillID = `label--pill ${newLabelName}`
 
-      cy.getByTestID('resource-card').should('have.length', 2)
+            cy.getByTestID(pillID).should('have.length', 1)
 
-      cy.getByTestID(`label--pill ${newLabelName}`).click()
+            cy.getByTestID(`label--pill--delete ${newLabelName}`).click({
+              force: true,
+            })
 
-      cy.getByTestID('resource-card').should('have.length', 1)
-    })
-  })
+            cy.getByTestID(pillID).should('have.length', 0)
+            cy.getByTestID(`inline-labels--empty`).should('have.length', 1)
+          })
+      })
 
-  describe('searching', () => {
-    it('can search dashboards by labels', () => {
-      const widgetSearch = 'searchME'
+      it('can add an existing label to a dashboard', () => {
+        const labelName = 'swogglez'
 
-      cy.get<Organization>('@org').then(({id}) => {
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, widgetSearch)
-        })
+        cy.createLabel(labelName).then(() => {
+          cy.getByTestID(`inline-labels--add`)
+            .first()
+            .click()
 
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, 'bar')
+          cy.getByTestID('inline-labels--popover').within(() => {
+            cy.getByTestID(`label--pill ${labelName}`).click()
+          })
+
+          cy.getByTestID('dashboard-card')
+            .first()
+            .within(() => {
+              cy.getByTestID(`label--pill ${labelName}`).should('be.visible')
+            })
         })
       })
 
-      cy.visit('/dashboards')
-
-      cy.getByTestID('resource-card').should('have.length', 2)
+      it('can create a label and add to a dashboard', () => {
+        const label = 'plerps'
+        cy.getByTestID(`inline-labels--add`)
+          .first()
+          .click()
 
-      cy.getByTestID('search-widget').type(widgetSearch)
+        cy.getByTestID('inline-labels--popover').within(() => {
+          cy.getByTestID('input-field').type(label)
+          cy.getByTestID('inline-labels--create-new').click()
+        })
 
-      cy.getByTestID('resource-card').should('have.length', 1)
+        cy.getByTestID('overlay--container').within(() => {
+          cy.getByInputName('name').should('have.value', label)
+          cy.getByTestID('create-label--button').click()
+        })
 
-      cy.getByTestID('resource-card')
-        .first()
-        .get('.label')
-        .should('contain', widgetSearch)
+        cy.getByTestID('dashboard-card')
+          .first()
+          .within(() => {
+            cy.getByTestID(`label--pill ${label}`).should('be.visible')
+          })
+      })
     })
 
-    it('can search by clicking label', () => {
-      const clicked = 'click-me'
+    describe('Searching', () => {
+      it('can search dashboards by labels', () => {
+        cy.getByTestID('dashboard-card').should('have.length', 2)
 
-      cy.get<Organization>('@org').then(({id}) => {
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, clicked)
-        })
+        cy.getByTestID('search-widget').type(newLabelName)
 
-        cy.createDashboard(id).then(({body}) => {
-          cy.createLabel('dashboards', body.id, 'bar')
-        })
-      })
+        cy.getByTestID('dashboard-card').should('have.length', 1)
 
-      cy.visit('/dashboards')
+        cy.getByTestID('dashboard-card')
+          .first()
+          .get('.label')
+          .should('contain', newLabelName)
+      })
 
-      cy.getByTestID('resource-card').should('have.length', 2)
+      it('can search by clicking label', () => {
+        const clicked = 'click-me'
 
-      cy.getByTestID(`label--pill ${clicked}`).click()
+        cy.getByTestID('dashboard-card').should('have.length', 2)
 
-      cy.getByTestID('search-widget').should('have.value', clicked)
+        cy.getByTestID(`label--pill ${clicked}`).click()
 
-      cy.getByTestID('resource-card').should('have.length', 1)
-    })
+        cy.getByTestID('search-widget').should('have.value', clicked)
 
-    it('can search by dashboard name', () => {
-      const searchName = 'beepBoop'
-      cy.get<Organization>('@org').then(({id}) => {
-        cy.createDashboard(id, searchName)
-        cy.createDashboard(id)
+        cy.getByTestID('dashboard-card').should('have.length', 1)
       })
 
-      cy.visit('/dashboards')
-
-      cy.getByTestID('search-widget').type('bEE')
+      it('can search by dashboard name', () => {
+        cy.getByTestID('search-widget').type(dashSearchName)
 
-      cy.getByTestID('resource-card').should('have.length', 1)
-      cy.getByTestID('dashboard-card--name').contains('span', searchName)
+        cy.getByTestID('dashboard-card').should('have.length', 1)
+        cy.getByTestID('dashboard-card--name').contains('span', dashboardName)
+      })
     })
   })
 })
diff --git a/ui/cypress/e2e/dashboardsView.test.ts b/ui/cypress/e2e/dashboardsView.test.ts
index 93108c4f797..3b29a4910d4 100644
--- a/ui/cypress/e2e/dashboardsView.test.ts
+++ b/ui/cypress/e2e/dashboardsView.test.ts
@@ -29,7 +29,7 @@ describe('Dashboard', () => {
 
     cy.visit('/dashboards')
 
-    cy.getByTestID('resource-card').should('contain', newName)
+    cy.getByTestID('dashboard-card').should('contain', newName)
   })
 
   it('can create a cell', () => {
diff --git a/ui/cypress/e2e/tasks.test.ts b/ui/cypress/e2e/tasks.test.ts
index bdda7f2c87a..df53bd2cc48 100644
--- a/ui/cypress/e2e/tasks.test.ts
+++ b/ui/cypress/e2e/tasks.test.ts
@@ -117,11 +117,11 @@ describe('Tasks', () => {
 
       cy.get<Organization>('@org').then(({id}) => {
         cy.createTask(id).then(({body}) => {
-          cy.createLabel('tasks', body.id, newLabelName)
+          cy.createAndAddLabel('tasks', body.id, newLabelName)
         })
 
         cy.createTask(id).then(({body}) => {
-          cy.createLabel('tasks', body.id, 'bar')
+          cy.createAndAddLabel('tasks', body.id, 'bar')
         })
       })
 
diff --git a/ui/cypress/index.d.ts b/ui/cypress/index.d.ts
index 49c55a5ee9a..24d383c63a9 100644
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@@ -11,6 +11,7 @@ import {
   getByTitle,
   createTask,
   createVariable,
+  createAndAddLabel,
   createLabel,
   createBucket,
   createScraper,
@@ -32,6 +33,7 @@ declare global {
       getByTestID: typeof getByTestID
       getByInputName: typeof getByInputName
       getByTitle: typeof getByTitle
+      createAndAddLabel: typeof createAndAddLabel
       createLabel: typeof createLabel
       createBucket: typeof createBucket
       createScraper: typeof createScraper
diff --git a/ui/cypress/support/commands.ts b/ui/cypress/support/commands.ts
index c8ac21bf200..be2eff3f8e1 100644
--- a/ui/cypress/support/commands.ts
+++ b/ui/cypress/support/commands.ts
@@ -100,6 +100,22 @@ export const createVariable = (
 }
 
 export const createLabel = (
+  name?: string
+): Cypress.Chainable<Cypress.Response> => {
+  return cy.request({
+    method: 'POST',
+    url: '/api/v2/labels',
+    body: {
+      name,
+      properties: {
+        description: `test ${name}`,
+        color: '#ff0054',
+      },
+    },
+  })
+}
+
+export const createAndAddLabel = (
   resource: string,
   resourceID: string,
   name?: string
@@ -274,3 +290,4 @@ Cypress.Commands.add('createVariable', createVariable)
 
 // Labels
 Cypress.Commands.add('createLabel', createLabel)
+Cypress.Commands.add('createAndAddLabel', createAndAddLabel)
diff --git a/ui/src/clockface/components/label/Label.scss b/ui/src/clockface/components/label/Label.scss
index 3706a472947..f635dba6d2b 100644
--- a/ui/src/clockface/components/label/Label.scss
+++ b/ui/src/clockface/components/label/Label.scss
@@ -5,40 +5,38 @@
 
 @import 'src/style/modules';
 
-$label-margin: 1px;
-
 .label {
-  display: inline-block;
-  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
   user-select: none;
   transition: background-color 0.25s ease;
+  flex-wrap: nowrap;
+}
+
+.label--name {
+  display: block;
+  cursor: inherit;
+  font-weight: 700;
   white-space: nowrap;
-  
-  > label {
-    cursor: inherit;
-    font-weight: 700;
-    margin: 0;
-  }
+  margin: 0;
 }
 
 .label--clickable {
-  &, &:hover {
+  &,
+  &:hover {
     cursor: pointer;
   }
 }
 
 .label--delete {
-  z-index: 2;
-  display: inline-block;
+  display: block;
   background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: $ix-border + $label-margin;
+  position: relative;
   border: 0;
-  margin: 0;
   outline: none;
   opacity: 0.4;
-  transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease, width 0.25s ease, transform 0.25s ease;
 
   &:hover {
     opacity: 1;
@@ -53,10 +51,10 @@ $label-margin: 1px;
   width: 60%;
   height: $ix-border;
   border-radius: $ix-border / 2;
-  transform: translate(-50%,-50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
 
   &:nth-child(2) {
-    transform: translate(-50%,-50%) rotate(-45deg);
+    transform: translate(-50%, -50%) rotate(-45deg);
   }
 }
 
@@ -71,18 +69,30 @@ $label-margin: 1px;
     border-radius: $height / 2;
     font-size: $fontSize;
     height: $height - $ix-marg-a;
-    line-height: $height - $ix-marg-a;
+  }
+
+  .label--name {
     padding: 0 ($padding + $ix-border);
+    height: $height - $ix-marg-a;
+    line-height: $height - $ix-marg-a;
+  }
+
+  &.label--deletable {
+    padding-right: $padding + $ix-border;
+  }
+
+  &.label--deletable .label--name {
+    padding-right: 0;
   }
 
   .label--delete {
     height: $height - $ix-marg-a;
-    width: $height - $ix-marg-a;
+    transform: translateX($padding - $ix-border);
+    width: 0;
   }
 
-  &.label--deletable {
-    position: relative;
-    padding-right: $height;
+  &:hover .label--delete {
+    width: $height - $ix-marg-a - $ix-border;
   }
 }
 
@@ -101,3 +111,14 @@ $label-margin: 1px;
 .label--lg {
   @include labelSizeModifier($form-lg-font, $form-lg-padding, $form-lg-height);
 }
+
+.label--colorless {
+  font-weight: 600;
+  font-style: italic;
+
+  &,
+  &:hover {
+    background-color: $g6-smoke;
+    color: $g13-mist;
+  }
+}
diff --git a/ui/src/clockface/components/label/Label.tsx b/ui/src/clockface/components/label/Label.tsx
index 0e01c4429cb..8e822f681d5 100644
--- a/ui/src/clockface/components/label/Label.tsx
+++ b/ui/src/clockface/components/label/Label.tsx
@@ -14,7 +14,7 @@ import './Label.scss'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-export interface LabelType {
+interface PassedProps {
   id: string
   name: string
   description: string
@@ -23,7 +23,7 @@ export interface LabelType {
   onDelete?: (id: string) => void
 }
 
-interface LabelProps {
+interface DefaultProps {
   size?: ComponentSize
   testID?: string
 }
@@ -32,11 +32,11 @@ interface State {
   isMouseOver: boolean
 }
 
-type Props = LabelType & LabelProps
+type Props = PassedProps & DefaultProps
 
 @ErrorHandling
 class Label extends Component<Props, State> {
-  public static defaultProps: Partial<Props> = {
+  public static defaultProps: DefaultProps = {
     size: ComponentSize.ExtraSmall,
     testID: 'label--pill',
   }
@@ -59,24 +59,29 @@ class Label extends Component<Props, State> {
     return (
       <div
         className={this.className}
-        onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={this.style}
         title={this.title}
-        data-testid={`${testID} ${name}`}
       >
-        <label>{name}</label>
+        <span
+          className="label--name"
+          onClick={this.handleClick}
+          data-testid={`${testID} ${name}`}
+        >
+          {name}
+        </span>
         {this.deleteButton}
       </div>
     )
   }
 
   private handleClick = (e: MouseEvent<HTMLDivElement>): void => {
-    e.preventDefault()
     const {id, onClick} = this.props
 
     if (onClick) {
+      e.stopPropagation()
+      e.preventDefault()
       onClick(id)
     }
   }
@@ -110,8 +115,8 @@ class Label extends Component<Props, State> {
 
     return classnames('label', {
       [`label--${size}`]: size,
-      'label--clickable': onClick,
       'label--deletable': onDelete,
+      'label--clickable': onClick,
     })
   }
 
@@ -126,7 +131,7 @@ class Label extends Component<Props, State> {
   }
 
   private get deleteButton(): JSX.Element {
-    const {onDelete, name} = this.props
+    const {onDelete, name, testID} = this.props
 
     if (onDelete) {
       return (
@@ -134,7 +139,8 @@ class Label extends Component<Props, State> {
           className="label--delete"
           onClick={this.handleDelete}
           type="button"
-          title={`Click × to remove "${name}"`}
+          title={`Remove label "${name}"`}
+          data-testid={`${testID}--delete ${name}`}
         >
           <div
             className="label--delete-x"
diff --git a/ui/src/clockface/index.ts b/ui/src/clockface/index.ts
index db70aac0244..af2430e2cb8 100644
--- a/ui/src/clockface/index.ts
+++ b/ui/src/clockface/index.ts
@@ -27,7 +27,7 @@ import ResourceList from './components/resource_list/ResourceList'
 import Context from './components/context_menu/Context'
 import FormElement from 'src/clockface/components/form_layout/FormElement'
 import DraggableResizer from 'src/clockface/components/draggable_resizer/DraggableResizer'
-import Label, {LabelType} from 'src/clockface/components/label/Label'
+import Label from 'src/clockface/components/label/Label'
 import LabelSelector from 'src/clockface/components/label/LabelSelector'
 import GridSizer from 'src/clockface/components/grid_sizer/GridSizer'
 import ResponsiveGridSizer from 'src/clockface/components/grid_sizer/ResponsiveGridSizer'
@@ -85,7 +85,6 @@ export {
   InputType,
   Label,
   LabelSelector,
-  LabelType,
   MultiSelectDropdown,
   MultiInputType,
   MultipleInput,
diff --git a/ui/src/configuration/components/CreateLabelOverlay.tsx b/ui/src/configuration/components/CreateLabelOverlay.tsx
index c89a643b14d..fc93689d277 100644
--- a/ui/src/configuration/components/CreateLabelOverlay.tsx
+++ b/ui/src/configuration/components/CreateLabelOverlay.tsx
@@ -14,7 +14,7 @@ import {
 import {validateHexCode} from 'src/configuration/utils/labels'
 
 // Types
-import {LabelType} from 'src/clockface'
+import {ILabel} from '@influxdata/influx'
 
 // Constants
 import {EMPTY_LABEL} from 'src/configuration/constants/LabelColors'
@@ -25,13 +25,13 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   isVisible: boolean
   onDismiss: () => void
-  onCreateLabel: (label: LabelType) => void
+  onCreateLabel: (label: ILabel) => void
   onNameValidation: (name: string) => string | null
   overrideDefaultName?: string
 }
 
 interface State {
-  label: LabelType
+  label: ILabel
   useCustomColorHex: boolean
 }
 
@@ -42,6 +42,18 @@ class CreateLabelOverlay extends Component<Props, State> {
     useCustomColorHex: false,
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.overrideDefaultName !== this.props.overrideDefaultName &&
+      this.props.isVisible === false
+    ) {
+      const name = this.props.overrideDefaultName
+      const label = {...this.state.label, name}
+
+      this.setState({label})
+    }
+  }
+
   public render() {
     const {isVisible, onDismiss, onNameValidation} = this.props
     const {label, useCustomColorHex} = this.state
@@ -54,8 +66,8 @@ class CreateLabelOverlay extends Component<Props, State> {
             <LabelOverlayForm
               id={label.id}
               name={label.name}
-              description={label.description}
-              colorHex={label.colorHex}
+              description={label.properties.description}
+              colorHex={label.properties.color}
               onColorHexChange={this.handleColorHexChange}
               onToggleCustomColorHex={this.handleToggleCustomColorHex}
               useCustomColorHex={useCustomColorHex}
@@ -76,7 +88,7 @@ class CreateLabelOverlay extends Component<Props, State> {
     const {label} = this.state
 
     const nameIsValid = this.props.onNameValidation(label.name) === null
-    const colorIsValid = validateHexCode(label.colorHex) === null
+    const colorIsValid = validateHexCode(label.properties.color) === null
 
     return nameIsValid && colorIsValid
   }
@@ -104,7 +116,14 @@ class CreateLabelOverlay extends Component<Props, State> {
     const value = e.target.value
     const key = e.target.name
 
-    if (key in this.state.label) {
+    if (key === 'description' || key === 'color') {
+      const properties = {...this.state.label.properties, [key]: value}
+      const label = {...this.state.label, properties}
+
+      this.setState({
+        label,
+      })
+    } else {
       const label = {...this.state.label, [key]: value}
 
       this.setState({
@@ -113,8 +132,9 @@ class CreateLabelOverlay extends Component<Props, State> {
     }
   }
 
-  private handleColorHexChange = (colorHex: string): void => {
-    const label = {...this.state.label, colorHex}
+  private handleColorHexChange = (color: string): void => {
+    const properties = {...this.state.label.properties, color}
+    const label = {...this.state.label, properties}
 
     this.setState({label})
   }
diff --git a/ui/src/configuration/components/LabelList.tsx b/ui/src/configuration/components/LabelList.tsx
index d5fabfd81ba..8963793bbf7 100644
--- a/ui/src/configuration/components/LabelList.tsx
+++ b/ui/src/configuration/components/LabelList.tsx
@@ -10,16 +10,17 @@ import LabelRow from 'src/configuration/components/LabelRow'
 import {validateLabelUniqueness} from 'src/configuration/utils/labels'
 
 // Types
-import {LabelType} from 'src/clockface'
+import {ILabel} from '@influxdata/influx'
 import {OverlayState} from 'src/types'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  labels: LabelType[]
+  labels: ILabel[]
   emptyState: JSX.Element
-  onUpdateLabel: (label: LabelType) => void
+  onUpdateLabel: (label: ILabel) => void
+  onDeleteLabel: (labelID: string) => void
 }
 
 interface State {
@@ -60,19 +61,22 @@ export default class LabelList extends PureComponent<Props, State> {
   }
 
   private get rows(): JSX.Element[] {
+    const {onDeleteLabel} = this.props
+
     return this.props.labels.map((label, index) => (
       <LabelRow
         key={label.id || `label-${index}`}
-        label={{
-          ...label,
-          onClick: this.handleStartEdit,
-        }}
+        onDelete={onDeleteLabel}
+        onClick={this.handleStartEdit}
+        label={label}
       />
     ))
   }
 
-  private get label(): LabelType {
-    return this.props.labels.find(b => b.id === this.state.labelID)
+  private get label(): ILabel | null {
+    if (this.state.labelID) {
+      return this.props.labels.find(l => l.id === this.state.labelID)
+    }
   }
 
   private handleCloseModal = () => {
@@ -88,7 +92,7 @@ export default class LabelList extends PureComponent<Props, State> {
     return !!labelID && overlayState === OverlayState.Open
   }
 
-  private handleUpdateLabel = async (updatedLabel: LabelType) => {
+  private handleUpdateLabel = async (updatedLabel: ILabel) => {
     await this.props.onUpdateLabel(updatedLabel)
     this.setState({overlayState: OverlayState.Closed})
   }
@@ -96,7 +100,7 @@ export default class LabelList extends PureComponent<Props, State> {
   private handleNameValidation = (name: string): string | null => {
     const {labels} = this.props
 
-    const names = labels.map(label => label.name)
+    const names = labels.map(label => label.name).filter(l => l !== name)
 
     return validateLabelUniqueness(names, name)
   }
diff --git a/ui/src/configuration/components/LabelOverlayForm.tsx b/ui/src/configuration/components/LabelOverlayForm.tsx
index fd598e1544a..d23845a8c31 100644
--- a/ui/src/configuration/components/LabelOverlayForm.tsx
+++ b/ui/src/configuration/components/LabelOverlayForm.tsx
@@ -149,6 +149,7 @@ export default class LabelOverlayForm extends PureComponent<Props> {
                   text={buttonText}
                   color={ComponentColor.Success}
                   type={ButtonType.Submit}
+                  testID="create-label--button"
                   status={
                     isFormValid
                       ? ComponentStatus.Default
diff --git a/ui/src/configuration/components/LabelRow.tsx b/ui/src/configuration/components/LabelRow.tsx
index 8afe608169a..23060a9ca17 100644
--- a/ui/src/configuration/components/LabelRow.tsx
+++ b/ui/src/configuration/components/LabelRow.tsx
@@ -2,28 +2,25 @@
 import React, {PureComponent} from 'react'
 
 // Components
-import {
-  Button,
-  Alignment,
-  ComponentSize,
-  ComponentColor,
-} from '@influxdata/clockface'
-import {IndexList, Label} from 'src/clockface'
+import {Alignment, ComponentSize} from '@influxdata/clockface'
+import {IndexList, Label, ConfirmationButton} from 'src/clockface'
 
 // Types
-import {LabelType} from 'src/clockface'
+import {ILabel} from '@influxdata/influx'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  label: LabelType
+  label: ILabel
+  onClick: (labelID: string) => void
+  onDelete: (labelID: string) => void
 }
 
 @ErrorHandling
 export default class LabelRow extends PureComponent<Props> {
   public render() {
-    const {label} = this.props
+    const {label, onDelete} = this.props
 
     return (
       <IndexList.Row key={label.id}>
@@ -31,28 +28,29 @@ export default class LabelRow extends PureComponent<Props> {
           <Label
             id={label.id}
             name={label.name}
-            colorHex={label.colorHex}
-            description={label.description}
+            colorHex={label.properties.color}
+            description={label.properties.description}
             size={ComponentSize.Small}
-            onClick={label.onClick}
+            onClick={this.handleClick}
           />
         </IndexList.Cell>
-        <IndexList.Cell>{label.description}</IndexList.Cell>
+        <IndexList.Cell>{label.properties.description}</IndexList.Cell>
         <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
-          <Button
+          <ConfirmationButton
             text="Delete"
-            color={ComponentColor.Danger}
+            confirmText="Confirm"
             size={ComponentSize.ExtraSmall}
-            onClick={this.handleClick}
+            onConfirm={onDelete}
+            returnValue={label.id}
           />
         </IndexList.Cell>
       </IndexList.Row>
     )
   }
 
-  private handleClick = () => {
-    const {label} = this.props
+  private handleClick = (): void => {
+    const {label, onClick} = this.props
 
-    label.onDelete(label.id)
+    onClick(label.id)
   }
 }
diff --git a/ui/src/configuration/components/Labels.tsx b/ui/src/configuration/components/Labels.tsx
index 268bcea4619..a839c0d4729 100644
--- a/ui/src/configuration/components/Labels.tsx
+++ b/ui/src/configuration/components/Labels.tsx
@@ -23,19 +23,14 @@ import {createLabel, updateLabel, deleteLabel} from 'src/labels/actions'
 import {validateLabelUniqueness} from 'src/configuration/utils/labels'
 
 // Types
-import {LabelType} from 'src/clockface'
-import {Label, AppState} from 'src/types/v2'
+import {AppState} from 'src/types/v2'
+import {ILabel} from '@influxdata/influx'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-interface LabelProperties {
-  color: string
-  description: string
-}
-
 interface StateProps {
-  labels: Label[]
+  labels: ILabel[]
 }
 
 interface State {
@@ -64,6 +59,7 @@ class Labels extends PureComponent<Props, State> {
   }
 
   public render() {
+    const {labels} = this.props
     const {searchTerm, isOverlayVisible} = this.state
 
     return (
@@ -85,8 +81,8 @@ class Labels extends PureComponent<Props, State> {
             onClick={this.handleShowOverlay}
           />
         </TabbedPageHeader>
-        <FilterList<LabelType>
-          list={this.labelTypes}
+        <FilterList<ILabel>
+          list={labels}
           searchKeys={['name', 'description']}
           searchTerm={searchTerm}
         >
@@ -95,6 +91,7 @@ class Labels extends PureComponent<Props, State> {
               labels={ls}
               emptyState={this.emptyState}
               onUpdateLabel={this.handleUpdateLabel}
+              onDeleteLabel={this.handleDelete}
             />
           )}
         </FilterList>
@@ -124,12 +121,12 @@ class Labels extends PureComponent<Props, State> {
     this.setState({searchTerm: e.target.value})
   }
 
-  private handleCreateLabel = (labelType: LabelType) => {
-    this.props.createLabel(labelType.name, this.labelProperties(labelType))
+  private handleCreateLabel = (label: ILabel) => {
+    this.props.createLabel(label.name, label.properties)
   }
 
-  private handleUpdateLabel = (labelType: LabelType) => {
-    this.props.updateLabel(labelType.id, this.labelProperties(labelType))
+  private handleUpdateLabel = (label: ILabel) => {
+    this.props.updateLabel(label.id, label.properties)
   }
 
   private handleDelete = async (id: string) => {
@@ -142,29 +139,6 @@ class Labels extends PureComponent<Props, State> {
     return validateLabelUniqueness(names, name)
   }
 
-  private get labelTypes(): LabelType[] {
-    return this.props.labels.map(this.labelType)
-  }
-
-  private labelType = (label: Label): LabelType => {
-    const {properties} = label
-
-    return {
-      id: label.id,
-      name: label.name,
-      description: properties.description,
-      colorHex: properties.color,
-      onDelete: this.handleDelete,
-    }
-  }
-
-  private labelProperties(labelType: LabelType): LabelProperties {
-    return {
-      description: labelType.description,
-      color: labelType.colorHex,
-    }
-  }
-
   private get emptyState(): JSX.Element {
     const {searchTerm} = this.state
 
diff --git a/ui/src/configuration/components/UpdateLabelOverlay.tsx b/ui/src/configuration/components/UpdateLabelOverlay.tsx
index 8f02fc43965..4c33ca77893 100644
--- a/ui/src/configuration/components/UpdateLabelOverlay.tsx
+++ b/ui/src/configuration/components/UpdateLabelOverlay.tsx
@@ -9,20 +9,20 @@ import {OverlayContainer, OverlayBody, OverlayHeading} from 'src/clockface'
 import {validateHexCode} from 'src/configuration/utils/labels'
 
 // Types
-import {LabelType} from 'src/clockface'
+import {ILabel} from '@influxdata/influx'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  label: LabelType
+  label: ILabel
   onDismiss: () => void
-  onUpdateLabel: (label: LabelType) => Promise<void>
+  onUpdateLabel: (label: ILabel) => Promise<void>
   onNameValidation: (name: string) => string | null
 }
 
 interface State {
-  label: LabelType
+  label: ILabel
   useCustomColorHex: boolean
 }
 
@@ -48,8 +48,8 @@ class UpdateLabelOverlay extends Component<Props, State> {
           <LabelOverlayForm
             id={label.id}
             name={label.name}
-            description={label.description}
-            colorHex={label.colorHex}
+            description={label.properties.description}
+            colorHex={label.properties.color}
             onColorHexChange={this.handleColorHexChange}
             onToggleCustomColorHex={this.handleToggleCustomColorHex}
             useCustomColorHex={useCustomColorHex}
@@ -69,7 +69,7 @@ class UpdateLabelOverlay extends Component<Props, State> {
     const {label} = this.state
 
     const nameIsValid = this.props.onNameValidation(label.name) === null
-    const colorIsValid = validateHexCode(label.colorHex) === null
+    const colorIsValid = validateHexCode(label.properties.color) === null
 
     return nameIsValid && colorIsValid
   }
@@ -85,7 +85,14 @@ class UpdateLabelOverlay extends Component<Props, State> {
     const value = e.target.value
     const key = e.target.name
 
-    if (key in this.state.label) {
+    if (key === 'description' || key === 'color') {
+      const properties = {...this.state.label.properties, [key]: value}
+      const label = {...this.state.label, properties}
+
+      this.setState({
+        label,
+      })
+    } else {
       const label = {...this.state.label, [key]: value}
 
       this.setState({
@@ -94,8 +101,9 @@ class UpdateLabelOverlay extends Component<Props, State> {
     }
   }
 
-  private handleColorHexChange = (colorHex: string): void => {
-    const label = {...this.state.label, colorHex}
+  private handleColorHexChange = (color: string): void => {
+    const properties = {...this.state.label.properties, color}
+    const label = {...this.state.label, properties}
 
     this.setState({label})
   }
diff --git a/ui/src/configuration/constants/LabelColors.ts b/ui/src/configuration/constants/LabelColors.ts
index 1e316db8d0f..8300d5ad87d 100644
--- a/ui/src/configuration/constants/LabelColors.ts
+++ b/ui/src/configuration/constants/LabelColors.ts
@@ -1,16 +1,17 @@
 // Labels can use a different set of brand colors than single stats or gauges
-import {LabelType} from 'src/clockface'
+import {ILabel} from '@influxdata/influx'
 import {LabelColor, LabelColorType} from 'src/types/colors'
 
 export const HEX_CODE_CHAR_LENGTH = 7
 
 export const DEFAULT_LABEL_COLOR_HEX = '#326BBA'
 
-export const EMPTY_LABEL: LabelType = {
-  id: 'newLabel',
+export const EMPTY_LABEL: ILabel = {
   name: '',
-  description: '',
-  colorHex: DEFAULT_LABEL_COLOR_HEX,
+  properties: {
+    description: '',
+    color: DEFAULT_LABEL_COLOR_HEX,
+  },
 }
 
 export const CUSTOM_LABEL: LabelColor = {
diff --git a/ui/src/dashboards/actions/v2/index.ts b/ui/src/dashboards/actions/v2/index.ts
index 71515b7f76c..ad0d13da126 100644
--- a/ui/src/dashboards/actions/v2/index.ts
+++ b/ui/src/dashboards/actions/v2/index.ts
@@ -40,7 +40,7 @@ import {RemoteDataState} from 'src/types'
 import {PublishNotificationAction} from 'src/types/actions/notifications'
 import {CreateCell} from '@influxdata/influx'
 import {Dashboard, NewView, Cell} from 'src/types/v2'
-import {Label} from 'src/types/v2/labels'
+import {ILabel} from '@influxdata/influx'
 
 export enum ActionTypes {
   LoadDashboards = 'LOAD_DASHBOARDS',
@@ -113,7 +113,7 @@ interface AddDashboardLabelsAction {
   type: ActionTypes.AddDashboardLabels
   payload: {
     dashboardID: string
-    labels: Label[]
+    labels: ILabel[]
   }
 }
 
@@ -121,7 +121,7 @@ interface RemoveDashboardLabelsAction {
   type: ActionTypes.RemoveDashboardLabels
   payload: {
     dashboardID: string
-    labels: Label[]
+    labels: ILabel[]
   }
 }
 
@@ -172,7 +172,7 @@ export const deleteCell = (
 
 export const addDashboardLabels = (
   dashboardID: string,
-  labels: Label[]
+  labels: ILabel[]
 ): AddDashboardLabelsAction => ({
   type: ActionTypes.AddDashboardLabels,
   payload: {dashboardID, labels},
@@ -180,7 +180,7 @@ export const addDashboardLabels = (
 
 export const removeDashboardLabels = (
   dashboardID: string,
-  labels: Label[]
+  labels: ILabel[]
 ): RemoveDashboardLabelsAction => ({
   type: ActionTypes.RemoveDashboardLabels,
   payload: {dashboardID, labels},
@@ -353,7 +353,7 @@ export const copyDashboardCellAsync = (
 
 export const addDashboardLabelsAsync = (
   dashboardID: string,
-  labels: Label[]
+  labels: ILabel[]
 ) => async (dispatch: Dispatch<Action>) => {
   try {
     const newLabels = await addDashboardLabelsAJAX(dashboardID, labels)
@@ -367,7 +367,7 @@ export const addDashboardLabelsAsync = (
 
 export const removeDashboardLabelsAsync = (
   dashboardID: string,
-  labels: Label[]
+  labels: ILabel[]
 ) => async (dispatch: Dispatch<Action>) => {
   try {
     await removeDashboardLabelsAJAX(dashboardID, labels)
diff --git a/ui/src/dashboards/apis/v2/index.ts b/ui/src/dashboards/apis/v2/index.ts
index 1199c70f463..b958c595e27 100644
--- a/ui/src/dashboards/apis/v2/index.ts
+++ b/ui/src/dashboards/apis/v2/index.ts
@@ -7,7 +7,7 @@ import {incrementCloneName} from 'src/utils/naming'
 
 // Types
 import {Cell, NewCell, Dashboard, View} from 'src/types/v2'
-import {Label} from 'src/types/v2/labels'
+import {ILabel} from '@influxdata/influx'
 
 import {Cell as CellAPI, CreateDashboardRequest} from '@influxdata/influx'
 import {client} from 'src/utils/api'
@@ -99,20 +99,20 @@ export const deleteCell = async (
 
 export const addDashboardLabels = async (
   dashboardID: string,
-  labels: Label[]
-): Promise<Label[]> => {
+  labels: ILabel[]
+): Promise<ILabel[]> => {
   const addedLabels = await Promise.all(
     labels.map(async label => {
       return client.dashboards.addLabel(dashboardID, label.id)
     })
   )
 
-  return addedLabels as Label[]
+  return addedLabels as ILabel[]
 }
 
 export const removeDashboardLabels = async (
   dashboardID: string,
-  labels: Label[]
+  labels: ILabel[]
 ): Promise<void> => {
   await Promise.all(
     labels.map(label => {
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx b/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
index 5d2d25c8c1b..3330dbf9d63 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
@@ -1,38 +1,59 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
 
 // Components
 import {IconFont, ComponentColor} from '@influxdata/clockface'
-import {Label, ResourceList, Context} from 'src/clockface'
+import {ResourceList, Context} from 'src/clockface'
 import FeatureFlag from 'src/shared/components/FeatureFlag'
+import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+
+// Actions
+import {createLabelAJAX} from 'src/labels/api'
+import {
+  addDashboardLabelsAsync,
+  removeDashboardLabelsAsync,
+} from 'src/dashboards/actions/v2'
 
 // Types
-import {Dashboard, Organization} from 'src/types/v2'
+import {Organization} from 'src/types/v2'
+import {IDashboard, ILabel} from '@influxdata/influx'
+import {AppState} from 'src/types/v2'
 
 // Constants
 import {DEFAULT_DASHBOARD_NAME} from 'src/dashboards/constants'
 
-interface Props {
-  dashboard: Dashboard
+interface PassedProps {
+  dashboard: IDashboard
   orgs: Organization[]
-  onDeleteDashboard: (dashboard: Dashboard) => void
-  onCloneDashboard: (dashboard: Dashboard) => void
-  onExportDashboard: (dashboard: Dashboard) => void
-  onUpdateDashboard: (dashboard: Dashboard) => void
-  onEditLabels: (dashboard: Dashboard) => void
+  onDeleteDashboard: (dashboard: IDashboard) => void
+  onCloneDashboard: (dashboard: IDashboard) => void
+  onExportDashboard: (dashboard: IDashboard) => void
+  onUpdateDashboard: (dashboard: IDashboard) => void
   showOwnerColumn: boolean
   onFilterChange: (searchTerm: string) => void
 }
 
-export default class DashboardCard extends PureComponent<Props> {
+interface StateProps {
+  labels: ILabel[]
+}
+
+interface DispatchProps {
+  onAddDashboardLabels: typeof addDashboardLabelsAsync
+  onRemoveDashboardLabels: typeof removeDashboardLabelsAsync
+}
+
+type Props = PassedProps & DispatchProps & StateProps
+
+class DashboardCard extends PureComponent<Props> {
   public render() {
-    const {dashboard} = this.props
+    const {dashboard, onFilterChange, labels} = this.props
     const {id} = dashboard
 
     return (
       <ResourceList.Card
         key={`dashboard-id--${id}`}
-        testID="resource-card"
+        testID="dashboard-card"
         name={() => (
           <ResourceList.Name
             onUpdate={this.handleUpdateDashboard}
@@ -51,7 +72,16 @@ export default class DashboardCard extends PureComponent<Props> {
             placeholder={`Describe ${dashboard.name}`}
           />
         )}
-        labels={() => this.labels}
+        labels={() => (
+          <InlineLabels
+            selectedLabels={dashboard.labels}
+            labels={labels}
+            onFilterChange={onFilterChange}
+            onAddLabel={this.handleAddLabel}
+            onRemoveLabel={this.handleRemoveLabel}
+            onCreateLabel={this.handleCreateLabel}
+          />
+        )}
         updatedAt={dashboard.meta.updatedAt}
         owner={this.ownerOrg}
         contextMenu={() => this.contextMenu}
@@ -108,59 +138,58 @@ export default class DashboardCard extends PureComponent<Props> {
     )
   }
 
-  private get labels(): JSX.Element {
-    const {dashboard} = this.props
-
-    if (!dashboard.labels.length) {
-      return (
-        <Label.Container
-          limitChildCount={4}
-          onEdit={this.handleEditLabels}
-          resourceName="this Dashboard"
-        />
-      )
-    }
+  private get ownerOrg(): Organization {
+    const {dashboard, orgs, showOwnerColumn} = this.props
 
-    return (
-      <Label.Container
-        limitChildCount={8}
-        onEdit={this.handleEditLabels}
-        resourceName="this Dashboard"
-      >
-        {dashboard.labels.map((label, index) => (
-          <Label
-            key={label.id || `label-${index}`}
-            id={label.id}
-            colorHex={label.properties.color}
-            name={label.name}
-            description={label.properties.description}
-            onClick={this.handleLabelClick}
-          />
-        ))}
-      </Label.Container>
-    )
+    if (showOwnerColumn) {
+      return orgs.find(o => o.id === dashboard.orgID)
+    }
   }
 
-  private handleLabelClick = (id: string) => {
-    const label = this.props.dashboard.labels.find(l => l.id === id)
+  private handleUpdateDescription = (description: string): void => {
+    const {onUpdateDashboard} = this.props
+    const dashboard = {...this.props.dashboard, description}
 
-    this.props.onFilterChange(label.name)
+    onUpdateDashboard(dashboard)
   }
 
-  private handleEditLabels = () => {
-    const {dashboard, onEditLabels} = this.props
-    onEditLabels(dashboard)
+  private handleAddLabel = (label: ILabel): void => {
+    const {dashboard, onAddDashboardLabels} = this.props
+
+    onAddDashboardLabels(dashboard.id, [label])
   }
 
-  private get ownerOrg(): Organization {
-    const {dashboard, orgs} = this.props
-    return orgs.find(o => o.id === dashboard.orgID)
+  private handleRemoveLabel = (label: ILabel): void => {
+    const {dashboard, onRemoveDashboardLabels} = this.props
+
+    onRemoveDashboardLabels(dashboard.id, [label])
   }
 
-  private handleUpdateDescription = (description: string): void => {
-    const {onUpdateDashboard} = this.props
-    const dashboard = {...this.props.dashboard, description}
+  private handleCreateLabel = async (label: ILabel): Promise<ILabel> => {
+    try {
+      const newLabel = await createLabelAJAX(label)
+      // notify success
+      return newLabel
+    } catch (err) {
+      console.log(err)
+      // notify of fail
+      throw err
+    }
+  }
+}
 
-    onUpdateDashboard(dashboard)
+const mstp = ({labels}: AppState): StateProps => {
+  return {
+    labels: labels.list,
   }
 }
+
+const mdtp: DispatchProps = {
+  onAddDashboardLabels: addDashboardLabelsAsync,
+  onRemoveDashboardLabels: removeDashboardLabelsAsync,
+}
+
+export default connect<StateProps, DispatchProps, PassedProps>(
+  mstp,
+  mdtp
+)(DashboardCard)
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx b/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx
index 968848a3eee..244764f4d6b 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx
@@ -13,7 +13,6 @@ interface Props {
   onCloneDashboard: (dashboard: Dashboard) => void
   onExportDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
-  onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
   showOwnerColumn: boolean
   onFilterChange: (searchTerm: string) => void
@@ -27,7 +26,6 @@ export default class DashboardCards extends PureComponent<Props> {
       onCloneDashboard,
       onDeleteDashboard,
       onUpdateDashboard,
-      onEditLabels,
       orgs,
       showOwnerColumn,
       onFilterChange,
@@ -41,7 +39,6 @@ export default class DashboardCards extends PureComponent<Props> {
         onCloneDashboard={onCloneDashboard}
         onDeleteDashboard={onDeleteDashboard}
         onUpdateDashboard={onUpdateDashboard}
-        onEditLabels={onEditLabels}
         orgs={orgs}
         showOwnerColumn={showOwnerColumn}
         onFilterChange={onFilterChange}
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
index 3682d95044e..68adebe894b 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -8,11 +8,9 @@ import {isEmpty} from 'lodash'
 import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/DashboardsIndexContents'
 import {Page} from 'src/pageLayout'
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
-import {OverlayTechnology} from 'src/clockface'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import ImportOverlay from 'src/shared/components/ImportOverlay'
 import ExportOverlay from 'src/shared/components/ExportOverlay'
-import EditLabelsOverlay from 'src/shared/components/EditLabelsOverlay'
 
 // APIs
 import {createDashboard, cloneDashboard} from 'src/dashboards/apis/v2/'
@@ -74,8 +72,6 @@ interface State {
   isImportingDashboard: boolean
   isExportingDashboard: boolean
   exportDashboard: Dashboard
-  isEditingDashboardLabels: boolean
-  dashboardLabelsEdit: Dashboard
 }
 
 @ErrorHandling
@@ -88,8 +84,6 @@ class DashboardIndex extends PureComponent<Props, State> {
       isImportingDashboard: false,
       isExportingDashboard: false,
       exportDashboard: null,
-      isEditingDashboardLabels: false,
-      dashboardLabelsEdit: null,
     }
   }
 
@@ -138,7 +132,6 @@ class DashboardIndex extends PureComponent<Props, State> {
                 onCloneDashboard={this.handleCloneDashboard}
                 onExportDashboard={this.handleExportDashboard}
                 onUpdateDashboard={handleUpdateDashboard}
-                onEditLabels={this.handleStartEditingLabels}
                 notify={notify}
                 searchTerm={searchTerm}
                 showOwnerColumn={true}
@@ -149,7 +142,6 @@ class DashboardIndex extends PureComponent<Props, State> {
         </Page>
         {this.importOverlay}
         {this.exportOverlay}
-        {this.labelEditorOverlay}
       </>
     )
   }
@@ -265,30 +257,6 @@ class DashboardIndex extends PureComponent<Props, State> {
       />
     )
   }
-
-  private handleStartEditingLabels = (dashboardLabelsEdit: Dashboard): void => {
-    this.setState({dashboardLabelsEdit, isEditingDashboardLabels: true})
-  }
-
-  private handleStopEditingLabels = (): void => {
-    this.setState({isEditingDashboardLabels: false})
-  }
-
-  private get labelEditorOverlay(): JSX.Element {
-    const {onAddDashboardLabels, onRemoveDashboardLabels} = this.props
-    const {isEditingDashboardLabels, dashboardLabelsEdit} = this.state
-
-    return (
-      <OverlayTechnology visible={isEditingDashboardLabels}>
-        <EditLabelsOverlay<Dashboard>
-          resource={dashboardLabelsEdit}
-          onDismissOverlay={this.handleStopEditingLabels}
-          onAddLabels={onAddDashboardLabels}
-          onRemoveLabels={onRemoveDashboardLabels}
-        />
-      </OverlayTechnology>
-    )
-  }
 }
 
 const mstp = (state: AppState): StateProps => {
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx
index e9707635f19..9d76a19b3f7 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardsIndexContents.tsx
@@ -5,6 +5,7 @@ import _ from 'lodash'
 // Components
 import Table from 'src/dashboards/components/dashboard_index/Table'
 import FilterList from 'src/shared/components/Filter'
+import GetLabels from 'src/configuration/components/GetLabels'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -23,7 +24,6 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => void
   onDeleteDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
-  onEditLabels: (dashboard: Dashboard) => void
   onFilterChange: (searchTerm: string) => void
   notify: (message: Notification) => void
   searchTerm: string
@@ -42,7 +42,6 @@ export default class DashboardsIndexContents extends Component<Props> {
       defaultDashboardLink,
       onSetDefaultDashboard,
       onUpdateDashboard,
-      onEditLabels,
       searchTerm,
       orgs,
       showOwnerColumn,
@@ -52,31 +51,32 @@ export default class DashboardsIndexContents extends Component<Props> {
     } = this.props
 
     return (
-      <FilterList<Dashboard>
-        list={dashboards}
-        searchTerm={searchTerm}
-        searchKeys={['name', 'labels[].name']}
-        sortByKey="name"
-      >
-        {filteredDashboards => (
-          <Table
-            filterComponent={filterComponent}
-            searchTerm={searchTerm}
-            dashboards={filteredDashboards}
-            onDeleteDashboard={onDeleteDashboard}
-            onCreateDashboard={onCreateDashboard}
-            onCloneDashboard={onCloneDashboard}
-            onExportDashboard={onExportDashboard}
-            defaultDashboardLink={defaultDashboardLink}
-            onSetDefaultDashboard={onSetDefaultDashboard}
-            onUpdateDashboard={onUpdateDashboard}
-            onEditLabels={onEditLabels}
-            orgs={orgs}
-            showOwnerColumn={showOwnerColumn}
-            onFilterChange={onFilterChange}
-          />
-        )}
-      </FilterList>
+      <GetLabels>
+        <FilterList<Dashboard>
+          list={dashboards}
+          searchTerm={searchTerm}
+          searchKeys={['name', 'labels[].name']}
+          sortByKey="name"
+        >
+          {filteredDashboards => (
+            <Table
+              filterComponent={filterComponent}
+              searchTerm={searchTerm}
+              dashboards={filteredDashboards}
+              onDeleteDashboard={onDeleteDashboard}
+              onCreateDashboard={onCreateDashboard}
+              onCloneDashboard={onCloneDashboard}
+              onExportDashboard={onExportDashboard}
+              defaultDashboardLink={defaultDashboardLink}
+              onSetDefaultDashboard={onSetDefaultDashboard}
+              onUpdateDashboard={onUpdateDashboard}
+              orgs={orgs}
+              showOwnerColumn={showOwnerColumn}
+              onFilterChange={onFilterChange}
+            />
+          )}
+        </FilterList>
+      </GetLabels>
     )
   }
 }
diff --git a/ui/src/dashboards/components/dashboard_index/Table.tsx b/ui/src/dashboards/components/dashboard_index/Table.tsx
index 54175d01191..cf8f2b1ed55 100644
--- a/ui/src/dashboards/components/dashboard_index/Table.tsx
+++ b/ui/src/dashboards/components/dashboard_index/Table.tsx
@@ -28,7 +28,6 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
   onSetDefaultDashboard: (dashboardLink: string) => void
-  onEditLabels: (dashboard: Dashboard) => void
   onFilterChange: (searchTerm: string) => void
   orgs: Organization[]
   showOwnerColumn: boolean
@@ -114,7 +113,6 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
       onCloneDashboard,
       onDeleteDashboard,
       onUpdateDashboard,
-      onEditLabels,
       orgs,
       showOwnerColumn,
       onFilterChange,
@@ -136,7 +134,6 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
               onExportDashboard={onExportDashboard}
               onDeleteDashboard={onDeleteDashboard}
               onUpdateDashboard={onUpdateDashboard}
-              onEditLabels={onEditLabels}
               orgs={orgs}
               showOwnerColumn={showOwnerColumn}
               onFilterChange={onFilterChange}
diff --git a/ui/src/labels/actions/index.ts b/ui/src/labels/actions/index.ts
index 0b3107e62b1..7edbc342bb7 100644
--- a/ui/src/labels/actions/index.ts
+++ b/ui/src/labels/actions/index.ts
@@ -3,7 +3,7 @@ import {client} from 'src/utils/api'
 
 // Types
 import {RemoteDataState} from 'src/types'
-import {Label} from 'src/types/v2'
+import {ILabel} from '@influxdata/influx'
 import {LabelProperties} from 'src/types/v2/labels'
 import {Dispatch} from 'redux-thunk'
 
@@ -22,13 +22,13 @@ interface SetLabels {
   type: 'SET_LABELS'
   payload: {
     status: RemoteDataState
-    list: Label[]
+    list: ILabel[]
   }
 }
 
 export const setLabels = (
   status: RemoteDataState,
-  list?: Label[]
+  list?: ILabel[]
 ): SetLabels => ({
   type: 'SET_LABELS',
   payload: {status, list},
@@ -37,11 +37,11 @@ export const setLabels = (
 interface AddLabel {
   type: 'ADD_LABEL'
   payload: {
-    label: Label
+    label: ILabel
   }
 }
 
-export const addLabel = (label: Label): AddLabel => ({
+export const addLabel = (label: ILabel): AddLabel => ({
   type: 'ADD_LABEL',
   payload: {label},
 })
@@ -51,7 +51,7 @@ interface EditLabel {
   payload: {label}
 }
 
-export const editLabel = (label: Label): EditLabel => ({
+export const editLabel = (label: ILabel): EditLabel => ({
   type: 'EDIT_LABEL',
   payload: {label},
 })
diff --git a/ui/src/labels/api/index.ts b/ui/src/labels/api/index.ts
new file mode 100644
index 00000000000..3c2b0c29178
--- /dev/null
+++ b/ui/src/labels/api/index.ts
@@ -0,0 +1,9 @@
+// API
+import {client} from 'src/utils/api'
+
+// Types
+import {ILabel} from '@influxdata/influx'
+
+export const createLabelAJAX = async (newLabel: ILabel): Promise<ILabel> => {
+  return await client.labels.create(newLabel.name, newLabel.properties)
+}
diff --git a/ui/src/organizations/components/Dashboards.test.tsx b/ui/src/organizations/components/Dashboards.test.tsx
deleted file mode 100644
index fc8a8acf1c8..00000000000
--- a/ui/src/organizations/components/Dashboards.test.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react'
-import {fireEvent} from 'react-testing-library'
-import {dashboard} from 'mocks/dummyData'
-import {renderWithRedux} from 'src/mockState'
-
-import Dashboards from 'src/organizations/components/Dashboards'
-
-function setup(override?) {
-  const props = {
-    onChange: jest.fn(),
-    orgName: '',
-    orgID: '',
-    ...override,
-  }
-
-  return renderWithRedux(<Dashboards {...props} />, s => ({
-    ...s,
-    links: [],
-    dashboards: [],
-    orgs: [],
-    ...override,
-  }))
-}
-
-describe('Dashboards', () => {
-  const labelName = 'clickMe'
-
-  const label = {
-    id: '123',
-    name: 'clickMe',
-    properties: {
-      color: '#ff0011',
-      description: '',
-    },
-  }
-
-  it('renders', () => {
-    const dashOne = {...dashboard, name: 'Test Dash 1', id: '1'}
-    const dashTwo = {...dashboard, name: 'Test Dash 2', id: '2'}
-    const dashboards = [dashOne, dashTwo]
-    const {getAllByTestId} = setup({dashboards})
-
-    const expected = getAllByTestId('resource-card')
-    expect(expected.length).toEqual(dashboards.length)
-  })
-
-  it('filters on label click', () => {
-    const otherLabel = {
-      ...label,
-      id: '1',
-      name: 'other',
-    }
-
-    const dashOne = {
-      ...dashboard,
-      name: 'Test Dash 1 ',
-      id: '1',
-      labels: [otherLabel],
-    }
-
-    const dashTwo = {
-      ...dashboard,
-      name: 'Test Dash 2',
-      id: '2',
-      labels: [label],
-    }
-
-    const dashboards = [dashOne, dashTwo]
-    const {getAllByTestId, getByTestId} = setup({dashboards})
-
-    const labelPill = getByTestId(`label--pill ${labelName}`)
-
-    expect(getAllByTestId('resource-card')).toHaveLength(2)
-
-    fireEvent.click(labelPill)
-
-    expect(getAllByTestId('resource-card')).toHaveLength(1)
-  })
-
-  it('displays searchTerm on label click', () => {
-    const dashOne = {
-      ...dashboard,
-      name: 'Test Dash 2',
-      id: '1',
-      labels: [label],
-    }
-
-    const dashboards = [dashOne]
-    const {getByTestId} = setup({dashboards})
-
-    const labelPill = getByTestId(`label--pill ${labelName}`)
-
-    const emptyFilterField = getByTestId(
-      `dashboards--filter-field`
-    ) as HTMLInputElement
-    expect(emptyFilterField.value).toEqual('')
-
-    fireEvent.click(labelPill)
-
-    const filterField = getByTestId(
-      `dashboards--filter-field ${labelName}`
-    ) as HTMLInputElement
-    expect(filterField.value).toEqual(labelName)
-  })
-})
diff --git a/ui/src/organizations/components/Dashboards.tsx b/ui/src/organizations/components/Dashboards.tsx
index 55de4e962dd..24ab8000c39 100644
--- a/ui/src/organizations/components/Dashboards.tsx
+++ b/ui/src/organizations/components/Dashboards.tsx
@@ -10,7 +10,6 @@ import DashboardsIndexContents from 'src/dashboards/components/dashboard_index/D
 import {OverlayTechnology, Input, Tabs} from 'src/clockface'
 import {Button, ComponentColor, IconFont} from '@influxdata/clockface'
 import ImportDashboardOverlay from 'src/dashboards/components/ImportDashboardOverlay'
-import EditLabelsOverlay from 'src/shared/components/EditLabelsOverlay'
 
 // Utils
 import {getDeep} from 'src/utils/wrappers'
@@ -138,14 +137,12 @@ class Dashboards extends PureComponent<Props, State> {
           onCloneDashboard={this.handleCloneDashboard}
           onExportDashboard={this.handleExportDashboard}
           onUpdateDashboard={handleUpdateDashboard}
-          onEditLabels={this.handleStartEditingLabels}
           notify={notify}
           searchTerm={searchTerm}
           showOwnerColumn={false}
           onFilterChange={this.handleFilterUpdate}
         />
         {this.renderImportOverlay}
-        {this.renderLabelEditorOverlay}
       </>
     )
   }
@@ -279,30 +276,6 @@ class Dashboards extends PureComponent<Props, State> {
       </OverlayTechnology>
     )
   }
-
-  private handleStartEditingLabels = (dashboardLabelsEdit: Dashboard): void => {
-    this.setState({dashboardLabelsEdit, isEditingDashboardLabels: true})
-  }
-
-  private handleStopEditingLabels = (): void => {
-    this.setState({isEditingDashboardLabels: false})
-  }
-
-  private get renderLabelEditorOverlay(): JSX.Element {
-    const {onAddDashboardLabels, onRemoveDashboardLabels} = this.props
-    const {isEditingDashboardLabels, dashboardLabelsEdit} = this.state
-
-    return (
-      <OverlayTechnology visible={isEditingDashboardLabels}>
-        <EditLabelsOverlay<Dashboard>
-          resource={dashboardLabelsEdit}
-          onDismissOverlay={this.handleStopEditingLabels}
-          onAddLabels={onAddDashboardLabels}
-          onRemoveLabels={onRemoveDashboardLabels}
-        />
-      </OverlayTechnology>
-    )
-  }
 }
 
 const mstp = (state: AppState): StateProps => {
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx b/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
index 065a630c4d8..6058e249949 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
@@ -9,7 +9,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 
 // Types
 import {IconFont} from 'src/clockface/types'
-import {Label} from '@influxdata/influx'
+import {ILabel} from '@influxdata/influx'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -25,7 +25,7 @@ interface Props {
   onDismiss: () => void
   onStartCreatingLabel: () => void
   onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
-  filteredLabels: Label[]
+  filteredLabels: ILabel[]
   onAddLabel: (labelID: string) => void
   onUpdateSelectedItem: (highlightedID: string) => void
 }
@@ -46,7 +46,10 @@ export default class InlineLabelPopover extends Component<Props> {
     } = this.props
     return (
       <ClickOutside onClickOutside={onDismiss}>
-        <div className="inline-labels--popover">
+        <div
+          className="inline-labels--popover"
+          data-testid="inline-labels--popover"
+        >
           <h5 className="inline-labels--popover-heading">Add Labels</h5>
           <Input
             icon={IconFont.Search}
diff --git a/ui/src/shared/components/inlineLabels/InlineLabels.scss b/ui/src/shared/components/inlineLabels/InlineLabels.scss
index e81944f36cc..d1188e1f067 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabels.scss
+++ b/ui/src/shared/components/inlineLabels/InlineLabels.scss
@@ -23,3 +23,71 @@ $inline-labels--margin: $ix-border / 2;
     margin: $inline-labels--margin;
   }
 }
+
+/*
+  Inline Label Editor Toggle Button
+  ------------------------------------------------------------------------------
+*/
+
+$label-margin: 1px;
+$label-edit-button-diameter: 18px; // Should be the same as the height of labels
+
+.inline-labels--add {
+  width: $label-edit-button-diameter;
+  height: $label-edit-button-diameter;
+  margin: $label-margin;
+  position: relative;
+  transition: opacity 0.25s ease;
+
+  &:before,
+  &:after {
+    content: '';
+    pointer-events: none;
+    background-color: $g20-white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    transition: width 0.25s ease;
+    height: $ix-border;
+    width: $label-edit-button-diameter - $ix-marg-b;
+    border-radius: $ix-border / 2;
+  }
+
+  &:after {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  > .button.button-sm {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    width: $label-edit-button-diameter;
+    height: $label-edit-button-diameter;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    color: transparent;
+    transition: background-color 0.25s ease, border-color 0.25s ease,
+      box-shadow 0.25s ease, height 0.25s ease, width 0.25s ease;
+
+    > .button-icon {
+      font-size: $form-sm-font;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &:hover > .button.button-sm {
+    width: $form-sm-height - $ix-marg-a;
+    height: $form-sm-height - $ix-marg-a;
+  }
+
+  &:hover:before,
+  &:hover:after {
+    width: $form-sm-height - $ix-marg-c;
+  }
+}
diff --git a/ui/src/shared/components/inlineLabels/InlineLabels.tsx b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
index 8d0944688a6..1fab7ea60b3 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabels.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
@@ -5,14 +5,9 @@ import _ from 'lodash'
 // Components
 import {Label} from 'src/clockface'
 import InlineLabelsEditor from 'src/shared/components/inlineLabels/InlineLabelsEditor'
-import CreateLabelOverlay from 'src/configuration/components/CreateLabelOverlay'
 
 // Types
-import {Label as LabelType} from '@influxdata/influx'
-import {OverlayState} from 'src/types/overlay'
-
-// Utils
-import {validateLabelUniqueness} from 'src/configuration/utils/labels'
+import {ILabel} from '@influxdata/influx'
 
 // Styles
 import 'src/shared/components/inlineLabels/InlineLabels.scss'
@@ -21,57 +16,33 @@ import 'src/shared/components/inlineLabels/InlineLabels.scss'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  selectedLabels: LabelType[]
-  labels: LabelType[]
-  onRemoveLabel: (label: LabelType) => void
-  onAddLabel: (label: LabelType) => void
-  onCreateLabel: (label: LabelType) => void
+  selectedLabels: ILabel[]
+  labels: ILabel[]
+  onRemoveLabel: (label: ILabel) => void
+  onAddLabel: (label: ILabel) => void
+  onCreateLabel: (label: ILabel) => Promise<ILabel>
   onFilterChange: (searchTerm: string) => void
 }
 
-interface State {
-  isCreatingLabel: OverlayState
-  overrideLabelName: string | null
-}
-
 @ErrorHandling
-export default class InlineLabels extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      isCreatingLabel: OverlayState.Closed,
-      overrideLabelName: null,
-    }
-  }
-
+export default class InlineLabels extends Component<Props> {
   public render() {
     return <div className="inline-labels">{this.selectedLabels}</div>
   }
 
   private get selectedLabels(): JSX.Element {
-    const {isCreatingLabel, overrideLabelName} = this.state
     const {selectedLabels, labels, onAddLabel, onCreateLabel} = this.props
 
     return (
-      <>
-        <div className="inline-labels--container">
-          <InlineLabelsEditor
-            labels={labels}
-            selectedLabels={selectedLabels}
-            onAddLabel={onAddLabel}
-            onCreateLabel={this.handleStartCreatingLabel}
-          />
-          {this.currentLabels}
-        </div>
-        <CreateLabelOverlay
-          isVisible={isCreatingLabel === OverlayState.Open}
-          onDismiss={this.handleStopCreatingLabel}
+      <div className="inline-labels--container">
+        <InlineLabelsEditor
+          labels={labels}
+          selectedLabels={selectedLabels}
+          onAddLabel={onAddLabel}
           onCreateLabel={onCreateLabel}
-          onNameValidation={this.handleNameValidation}
-          overrideDefaultName={overrideLabelName}
         />
-      </>
+        {this.currentLabels}
+      </div>
     )
   }
 
@@ -107,21 +78,4 @@ export default class InlineLabels extends Component<Props, State> {
 
     onRemoveLabel(label)
   }
-
-  private handleStopCreatingLabel = (): void => {
-    this.setState({
-      isCreatingLabel: OverlayState.Closed,
-      overrideLabelName: null,
-    })
-  }
-
-  private handleStartCreatingLabel = (name: string): void => {
-    this.setState({overrideLabelName: name, isCreatingLabel: OverlayState.Open})
-  }
-
-  private handleNameValidation = (name: string): string | null => {
-    const names = this.props.labels.map(label => label.name)
-
-    return validateLabelUniqueness(names, name)
-  }
 }
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.scss b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.scss
index 8e8b1c07515..297c280cd2c 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.scss
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.scss
@@ -16,9 +16,8 @@ $inline-labels--popover-caret: 12px;
 
 .inline-labels--popover {
   position: absolute;
-  top: calc(100% + #{$inline-labels--popover-caret});
-  left: 9px;
-  transform: translateX(-50%);
+  top: calc(100% + #{$inline-labels--popover-caret - $ix-marg-a});
+  left: $inline-labels--popover-caret * -2;
   width: 320px;
   background-color: $g5-pepper;
   padding: $ix-marg-c;
@@ -35,7 +34,7 @@ $inline-labels--popover-caret: 12px;
     border-bottom-color: $g5-pepper;
     position: absolute;
     top: 0;
-    left: 50%;
+    left: ($inline-labels--popover-caret * 3) - $ix-border;
     transform: translate(-50%, -100%);
   }
 }
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
index c428d0f0c96..894ed5e873d 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
@@ -2,9 +2,6 @@
 import React, {Component, ChangeEvent} from 'react'
 import _ from 'lodash'
 
-// APIs
-import {client} from 'src/utils/api'
-
 // Components
 import {
   Button,
@@ -16,7 +13,7 @@ import InlineLabelPopover from 'src/shared/components/inlineLabels/InlineLabelPo
 import CreateLabelOverlay from 'src/configuration/components/CreateLabelOverlay'
 
 // Types
-import {Label} from '@influxdata/influx'
+import {ILabel} from '@influxdata/influx'
 import {OverlayState} from 'src/types/overlay'
 
 // Utils
@@ -28,15 +25,15 @@ import 'src/shared/components/inlineLabels/InlineLabelsEditor.scss'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  selectedLabels: Label[]
-  labels: Label[]
-  onAddLabel: (label: Label) => void
-  onCreateLabel: (labelName: string) => void
+  selectedLabels: ILabel[]
+  labels: ILabel[]
+  onAddLabel: (label: ILabel) => void
+  onCreateLabel: (label: ILabel) => Promise<ILabel>
 }
 
 interface State {
   searchTerm: string
-  filteredLabels: Label[]
+  filteredLabels: ILabel[]
   isPopoverVisible: boolean
   selectedItemID: string
   isCreatingLabel: OverlayState
@@ -68,13 +65,14 @@ class InlineLabelsEditor extends Component<Props, State> {
     return (
       <>
         <div className="inline-labels--editor">
-          <div className="inline-label--add">
+          <div className="inline-labels--add">
             <Button
               color={ComponentColor.Secondary}
               titleText="Add labels"
               onClick={this.handleShowPopover}
               shape={ButtonShape.Square}
               icon={IconFont.Plus}
+              testID="inline-labels--add"
             />
           </div>
           {this.popover}
@@ -125,8 +123,9 @@ class InlineLabelsEditor extends Component<Props, State> {
       <div
         className="label label--xs label--colorless"
         onClick={this.handleShowPopover}
+        data-testid="inline-labels--empty"
       >
-        Add a label
+        <span className="label--name">Add a label</span>
       </div>
     )
   }
@@ -195,16 +194,17 @@ class InlineLabelsEditor extends Component<Props, State> {
     this.setState({searchTerm, filteredLabels, selectedItemID})
   }
 
-  private get availableLabels(): Label[] {
+  private get availableLabels(): ILabel[] {
     const {selectedLabels} = this.props
     const {filteredLabels} = this.state
 
     return _.differenceBy(filteredLabels, selectedLabels, label => label.name)
   }
 
-  private handleCreateLabel = async (label: Label) => {
-    const newLabel = await client.labels.create(label.name, label.properties)
-    this.props.onAddLabel(newLabel)
+  private handleCreateLabel = async (label: ILabel) => {
+    const {onCreateLabel, onAddLabel} = this.props
+    const newLabel = await onCreateLabel(label)
+    onAddLabel(newLabel)
   }
 
   private handleStartCreatingLabel = (): void => {
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx b/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
index c02bdd80063..0d7cc891362 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
@@ -12,12 +12,12 @@ import InlineLabelsListItem from 'src/shared/components/inlineLabels/InlineLabel
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Label} from '@influxdata/influx'
+import {ILabel} from '@influxdata/influx'
 
 interface Props {
   searchTerm: string
   selectedItemID: string
-  filteredLabels: Label[]
+  filteredLabels: ILabel[]
   onItemClick: (labelID: string) => void
   onUpdateSelectedItem: (labelID: string) => void
   allLabelsUsed: boolean
@@ -80,7 +80,7 @@ class InlineLabelsList extends Component<Props> {
     }
 
     const searchTermHasExactMatch = filteredLabels.reduce(
-      (acc: boolean, current: Label) => {
+      (acc: boolean, current: ILabel) => {
         return acc === true || current.name === searchTerm
       },
       false
@@ -94,6 +94,7 @@ class InlineLabelsList extends Component<Props> {
       <div
         className="inline-labels--list-item inline-labels--create-new"
         onClick={onStartCreatingLabel}
+        data-testid="inline-labels--create-new"
       >
         Create new label "<strong>{`${searchTerm}`}</strong>"
       </div>
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsListItem.tsx b/ui/src/shared/components/inlineLabels/InlineLabelsListItem.tsx
index 1c1fa7d734f..45a72d2d2d1 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsListItem.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsListItem.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component} from 'react'
+import React, {Component, MouseEvent} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
 
@@ -45,7 +45,8 @@ class InlineLabelsListItem extends Component<Props> {
     onMouseOver(id)
   }
 
-  private handleClick = (): void => {
+  private handleClick = (e: MouseEvent<HTMLDivElement>): void => {
+    e.stopPropagation()
     const {onClick, id} = this.props
 
     onClick(id)