Orbit Chip Button

A solid primary pill led by a paper chip. On hover the chip's diagonal arrow turns to point forward and the pill lifts. Colours come from the active theme and palette. Transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add orbit-chip-button

Manual

1. Install framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/orbit-chip-button.tsx.
4. Paste the code.

Usage

import { OrbitChipButton } from "@/components/ui/orbit-chip-button";

export default function Example() {
  return (
    <div className="h-[300px] w-full">
      <OrbitChipButton onClick={() => console.log("clicked")} />
    </div>
  );
}

Props