Like Button

A heart button. Liking pops the heart past full size and settles it back while a ring of sparks flies outward and fades; unliking just shrinks it quietly. The button reports whether it is pressed and the count is part of its spoken name. With reduced motion the colour changes and nothing else. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add like-button

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/like-button.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { LikeButton } from "@/components/ui/like-button";

export default function Example() {
  const [liked, setLiked] = useState(false);

  return <LikeButton liked={liked} onChange={setLiked} count={128} />;
}

Props