How to Add a “Load More” Button to Your Super Database (Wokraround)

At the moment, a native Load More feature isn’t yet supported in Super due to Notion API limitations. However, since this is one of the most requested functions for databases, we’ve created a workaround that lets your visitors expand your collection and reveal more items without leaving the page.

Step 1: Hide Extra Items Initially

First, hide all items after the first 5 using CSS:

Note: You can always change the nth child depending on how many items you wanted to show e.g.: (n+7), (n+8)

.notion-collection-gallery.small .notion-collection-card:nth-child(n+6) {
  display: none;
}

/* When expanded, show everything */
.notion-collection-gallery.small.show-all .notion-collection-card {
  display: block !important;
}

This keeps your gallery compact and only shows a preview of your collection.

Step 2: Add the “Load More” Button

Place "Load More" action button under your gallery database using super-embed:

super-embed: 
<button id="load-more-btn">Load more</button>

Step 3: Make the Button Functional

Add this JavaScript snippet to reveal the hidden items. Place it to your Code>Body Section:

<script>
(function () {
  function init() {
    const gallery = document.querySelector(".notion-collection-gallery.small");
    const button = document.getElementById("load-more-btn");

    if (!gallery || !button) {
      setTimeout(init, 300);
      return;
    }

    button.addEventListener("click", function () {
      gallery.classList.add("show-all");
      button.style.display = "none";
    });
  }

  init();
})();
</script>

Step 4: Enhance the Button Styling

To make the button smaller, friendlier, and more interactive, add the following CSS:

#load-more-btn {
  padding: 8px 16px;          /* Smaller, more compact */
  font-size: 14px;            /* Slightly smaller text */
  border: none;               /* Remove default border */
  border-radius: 8px;         /* Rounded corners for softer look */
  background-color: #D3D3D3;  /* Nice primary color (can change) */
  color: #fff;                /* White text */
  cursor: pointer;            /* Pointer on hover */
  transition: all 0.2s ease; /* Smooth hover effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
}

#load-more-btn:hover {
  background-color: #3730a3;   /* Slightly darker on hover */
  transform: translateY(-1px); /* Lift effect on hover */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#load-more-btn:active {
  transform: translateY(0);    /* Press effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

This is how it looks like:

Benefits of this styling:

Compact and non-intrusive on your page.
Rounded corners and subtle shadows for a modern look.
Hover and press effects make the button feel interactive.

⚠️ Important Limitation

Currently, this workaround does not support a “Show Less” or collapse feature. Once items are revealed, they cannot be hidden again without refreshing the page.

The reason for this limitation is due to complexity and Notion API restrictions, fully toggling items back and forth dynamically would require advanced state management that Super cannot currently handle natively. For now, this approach provides a simple way to reveal more items while keeping the setup lightweight and reliable.