Ink Pill

A pill call-to-action set in uppercase mono. The primary variant is an ink wash of the theme's primary colour that thins toward the paper, with a soft shadow and a small diamond glyph, and brightens on hover. The ghost variant is a card-coloured pill with a hairline border. Both follow the active theme and palette in light and dark mode. Hue, saturation and brightness grade the button with a CSS filter, and transitions are switched off when the user prefers reduced motion. The component centres the button in its parent and is transparent unless you pass background.

Installation

CLI

npx @modus-ui/cli add ink-pill

Manual

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

Usage

import { InkPill } from "@/components/ui/ink-pill";

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

Props