Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

Tapping on a Favorite will toggle it between on and off.

PropTypeNotes
valueboolean
onValueChangefunction

Examples

// Override

import { Override } from "framer";

export function FavoriteExample(): Override {
  return {
    value: false,
    onValueChange: value => console.log("Value: " + value)
  };
}
// Code Component

import * as React from "react";
import { Frame } from "framer";
// @ts-ignore
import { Favorite } from "@framer/steveruizok.education/code";

export const FavoriteExample = props => {
  const handleValueChange = (value, valid) => {
    console.log(`Value: ${value}`);
  };

  return (
    <Frame size="100%" background="none">
      <Favorite center onValueChange={handleValueChange} />
    </Frame>
  );
};