Round Glyph

Round icon buttons in three treatments. The default plus is a raised ink key with a pressed lip whose cross turns on hover; play is a frosted disc with a sheen orbiting inside that fills with the primary colour on hover; mail is a dashed ring that stitches a second ring around itself on hover. Animations and transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add round-glyph

Manual

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

Usage

import { RoundGlyph } from "@/components/ui/round-glyph";

export default function Example() {
  return <RoundGlyph variant="mail" />;
}

Props