Hairline CTA

A mono, uppercase hairline button with an index number and a diagonal arrow. On hover the theme's primary colour floods up from the baseline and the arrow lifts. It follows the active theme and palette, and fills its parent so it can be centred in any container. Transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add hairline-cta

Manual

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

Usage

import { HairlineCta } from "@/components/ui/hairline-cta";

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

Props