---
title: "Page Favouriting — Framer component · Best of Framer"
description: "$19.00 · Framer component · by Nabeel · Buttons. About A customizable favorite/like button that shows total favorites and remembers if the current user has favorited the page."
canonical: "https://framer.elliotli.dev/component/page-favouriting"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Page Favouriting

# Page Favouriting

[View on Framer](https://framer.com/marketplace/components/page-favouriting/?via=elliot-li)

![Page Favouriting preview image 1](https://framer.elliotli.dev/og/component/page-favouriting/2c32fd0ffb0a0cd1/1600x1200.jpg)

## Summary

About A customizable favorite/like button that shows total favorites and remembers if the current user has favorited the page.

## Description

## About

A customizable favorite/like button that shows total favorites and remembers if the current user has favorited the page. When clicked, it updates both the visual state and total count, saves the user's preference in their browser. No need for additional APIs/subscriptions/set up. Just drag and drop and see it in effect.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy and paste the FavoriteButton component into your project file
    
2.  Customize the appearance through the properties panel
    
3.  Publish and preview URL
    
4.  The button will automatically:
    
    -   Show total favorites from all users
        
    -   Remember if the current user has favorited (using local storage)
        
    -   Update counts instantly when clicked
        
5.  To test it out, open the URL in a different device or in incognito.
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-igsvjiu3-gOPkGCxDABVYOy9kKY5u5RHGNfa6kw)

The component is pre-connected to a public Supabase database that stores total favorites per page. It uses local storage to remember each user's favorites across sessions. You can customize:

1.  Icon Type: Choose between heart, star, or bookmark
    
2.  Icon Size
    
3.  Spacing
    
4.  Active/Inactive Colors
    
5.  Font: Complete typography control
    

**Note**: The component uses a shared public Supabase instance with rate limiting and row-level security in place. While this isn't the most secure approach, it enables drag-and-drop functionality since we're only tracking basic interactions.

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #11306

## Details

- **Author**: Nabeel
- **Price**: $19.00
- **Published**: 2025-08-18
- **Updated**: 2025-08-15
- **Added**: 2025-08-12
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything