Ink Endcap Button

An italic serif pill finished with a round endcap holding an arrow. The default outline variant is a hairline ring with a primary endcap; solid fills the pill with the primary colour and inverts the endcap. It lifts slightly on hover and holds still when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add ink-endcap-button

Manual

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

Usage

import { InkEndcapButton } from "@/components/ui/ink-endcap-button";

export default function Example() {
  return <InkEndcapButton label="Open the archive" />;
}

Props