diff --git a/ui/src/common/QuickFilter.js b/ui/src/common/QuickFilter.js
index 679739d6d..62263ffc5 100644
--- a/ui/src/common/QuickFilter.js
+++ b/ui/src/common/QuickFilter.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Chip, makeStyles } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
+import inflection from 'inflection'
 
 const useQuickFilterStyles = makeStyles((theme) => ({
   chip: {
@@ -8,9 +9,20 @@ const useQuickFilterStyles = makeStyles((theme) => ({
   },
 }))
 
-export const QuickFilter = ({ source, label }) => {
+export const QuickFilter = ({ source, resource, label, defaultValue }) => {
   const translate = useTranslate()
   const classes = useQuickFilterStyles()
-  const lbl = label || `resources.song.fields.${source}`
-  return <Chip className={classes.chip} label={translate(lbl)} />
+  let lbl = label || source
+  if (typeof lbl === 'string' || lbl instanceof String) {
+    if (label) {
+      lbl = translate(lbl, {
+        _: inflection.humanize(inflection.underscore(lbl)),
+      })
+    } else {
+      lbl = translate(`resources.${resource}.fields.${source}`, {
+        _: inflection.humanize(inflection.underscore(source)),
+      })
+    }
+  }
+  return <Chip className={classes.chip} label={lbl} />
 }
diff --git a/ui/src/common/QuickFilter.test.js b/ui/src/common/QuickFilter.test.js
new file mode 100644
index 000000000..aad703110
--- /dev/null
+++ b/ui/src/common/QuickFilter.test.js
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { cleanup, render } from '@testing-library/react'
+import { QuickFilter } from './QuickFilter'
+import StarIcon from '@material-ui/icons/Star'
+
+describe('QuickFilter', () => {
+  afterEach(cleanup)
+
+  it('renders label if provided', () => {
+    const { getByText } = render(
+      <QuickFilter resource={'song'} source={'name'} label={'MyLabel'} />
+    )
+    expect(getByText('MyLabel')).not.toBeNull()
+  })
+
+  it('renders resource translation if label is not provided', () => {
+    const { getByText } = render(
+      <QuickFilter resource={'song'} source={'name'} />
+    )
+    expect(getByText('resources.song.fields.name')).not.toBeNull()
+  })
+
+  it('renders a component label', () => {
+    const { getByTestId } = render(
+      <QuickFilter
+        resource={'song'}
+        source={'name'}
+        label={<StarIcon data-testid="label-icon-test" />}
+      />
+    )
+    expect(getByTestId('label-icon-test')).not.toBeNull()
+  })
+})