Introduction
The component is built for non-technical creators that don't want to go through setting up a database. Relying on cookies, Supabase and unique IDs, allows this resource to store your likes count with accuracy.
Don’t have the component yet? Purchase it here.
Getting Started
Click on the remix link you received from Lemon Squeezy which will open the project in Framer. Grab one of the buttons from the canvas by copying it and pasting it into your own project. Make sure to change the Button ID following the format provided.
Component Features
Button ID
Assign a unique identifier to each button instance for tracking and reference. A great format would be as follows: # + DATE + _TIMESTAMP (eg. #29072025_035217).
Initial Likes
Set a starting like count if you don't want to start at zero likes.
Font
Select the font family for the button’s text with all the native Framer controls.
Title
Customize the text that appears before and after the like count, as well as the labels for “like” and “liked” states.
Show Icon
Toggle the visibility of the icon in the button.
Icon Size
Adjust the icon size, with a default of 16px.
Icon Color
Set the default icon color and the color when liked.
Icon SVG
Paste your own SVG icon from libraries like Hero Icons, Phosphor, or Lucide. You can also paste in your own custom icon as long as you grab the SVG code and make sure that fills and strokes have their color set to currentColor.
Icon Gap
Control the spacing between the icon and the text.
Padding
Set the general padding for all sides simultaneously or individually for top, right, bottom, and left values.
Border
Customize the border’s radius, width, color, and liked state color.
Background
Set background color, hover state color, liked state color, and liked hover state color.
Transition
Control the animation behavior for interactive states.
Data Collected
This component stores all interaction data in a Supabase-hosted database. The data collected is completely anonymous — no IP addresses, GPS coordinates, or other personally identifiable information (PII) is stored.
The data collected is stored in the following schema:
Button number
Button ID
Likes count
Date created
Date updated
If you wish to store the data yourself within your own solutions, please reach out to contact@pixcodrops.com for more information.
