---
title: FavoriteButton
description: 'A button component for toggling a favorite state, typically used for products.'
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/favoritebutton'
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/commerce/favoritebutton.md
---

# FavoriteButton

A button component for toggling a favorite state, typically used for products.

#### Props

* **filled**

  **boolean**

  Whether the product is currently favorited

* **onClick**

  **() => void**

  Click handler for toggling favorite state

Examples

## Preview

![favoritebutton](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/FavoriteButton-D9OAhJlP.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'

  import {FavoriteButton} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="flex items-center gap-4">
        <FavoriteButton />
        <FavoriteButton filled />
      </div>
    )
  }
  ```

***