How to add buttons at the top of Strapi Content Manager List View?

System Information
  • Strapi Version: 4.3.4
  • Database: Postgres
  • Node Version: 16

Screen Shot 2022-09-30 at 3.51.48 pm

At the top of the Content Manager List View, I would like to add a button that will open a modal like the “Delete” button in the screenshot above. I need to allow users to filter a large number of records and I would like to use the “Filters” options that come with Strapi out-of-the-box to achieve this.

Otherwise, I will need to build my own Strapi Admin UI Component with filtering.

I hope, I don’t need to fork Strapi to achieve this.



Hi. I think you can do this using the Injection Zones API.

I found a blog post in a different question that explains how to use it: 4 ways to build a custom Strapi Admin Panel | Theodo


Thanks @zerocaps.

Hopefully, I will be able to achieve the results I want with this!

Also, welcome to the forums! What a first post :clap:

The article and docs were definitely a help. I’ve been able to add the button on the listView.

In my use-case scenario, I’m trying to get the IDs of the content filtered or checked/selected. Any tips on how to do this?

Current progress with the “Link To” button:

I’ve made some progress, I have a modal showing and have collected the filters by using the following:

const LinkRelationshipToModal = ({ onClose }) => {
  const [{ query }, setQuery] = useQueryParams();
  const filters: any[] = query.filters?.$and || [];
  console.log("openLinkToModal filters", filters);

Now all I have to do is connect the filters with an ID of the item they want to link the results to.

Hi. @dallasclark Have you succeded with the injection zone. With the blog you shared I came up with the button. Now I need to add the filter functionality of the collection with that button.

Can you please guide me?

I made it. Below is my solution.


import React from "react";
import { Button } from "@strapi/design-system/Button";
import { Filter } from "@strapi/icons";

const ComponentName = () => {
  async function handleComponent() {
    // Your logic goes here
    return (
        startIcon={<Filter />}
        Next 5 days

export default ComponentName;


import ComponentName from "./extensions/components/ComponentName";

export default {
  bootstrap(app) {
    app.injectContentManagerComponent("listView", "actions", {
      name: "ComponentName",
      Component: ComponentName,

Glad you had success, and thank you for sharing your solution

1 Like

Is there any way to display the component in the list view only for specific collection-types?

Yes, by design, you create the component on a content-type.