Button Atlas

One button family with 22 treatments, from pressable keycaps and launch keys to dashed dot borders, rotating beams and glass pills. Every colour comes from the theme tokens (--primary, --primary-foreground, --foreground, --card, --border, --muted), so each button follows light and dark mode and the active palette without configuration. Labels use the Modus faces: mono caps, body sans and the italic heading serif. Each variant keeps its own hover, focus and press motion, and animations stop when the user prefers reduced motion.

Live Preview

01 / ink-capsule

02 / keystroke-button

03 / stitch-frame-button

04 / rising-motes

05 / roll-label

06 / comet-ring-button

07 / satin-capsule

08 / conjure-button

Book a review

09 / halo-invite

10 / halo-trace

11 / glaze-button

12 / ink-pill

13 / lumen-cta-ghost

14 / sheen-cta

15 / kiln-button

16 / hairline-cta

17 / orbit-chip-button

18 / meridian-keycap-primary

19 / meridian-keycap-secondary

20 / ink-endcap-button

21 / aster-glass-access

22 / aster-glass-arrow

Modus / Button Atlas

Installation

CLI

npx @modus-ui/cli add button-atlas

Manual

Copy the code from the component tab.
Create a file at components/ui/button-atlas.tsx.
Paste the code.

Usage

tsx

import { ButtonAtlas } from "@/components/ui/button-atlas";

export default function Example() {
  return (
    <div className="h-[300px] w-full">
      <ButtonAtlas variant="meridian-keycap-primary" label="Add to project" />
    </div>
  );
}

Variants

dark-pill, launch-button, dot-border-button, floating-dots-cta, sliding-text-cta, gradient-beam-cta, gradient-pill-button, generate-button, glassmorphism-cta, spinning-border-button, gradient-cta, lumen-cta, lumen-cta-ghost, trochil-signal, attune-thermal, tideform-outline, understory-arrow-pill, meridian-keycap-primary, meridian-keycap-secondary, halvorsen-arrow-pill, aster-glass-access, aster-glass-arrow.

Props

Prop	Type	Default	Description
`variant`	`ButtonAtlasVariant`	`"meridian-keycap-primary"`	Which of the 22 treatments to render.
`label`	`string`	Each variant's default copy	Button text.
`activeLabel`	`string`	`"Composing"`	Text the Generate variant resolves to while focused.
`hue`	`number`	`0`	Hue rotation in degrees (-180 to 180).
`saturation`	`number`	`1`	Saturation multiplier (0 to 2).
`brightness`	`number`	`1`	Brightness multiplier (0.35 to 1.65).
`background`	`string`	`undefined`	Stage background. Transparent by default, so it sits on its parent.
`avatarSrc`	`string`	`"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&h=128&fit=crop"`	Portrait shown in the Glassmorphism CTA.
`avatarAlt`	`string`	`"Reviewer headshot"`	Alt text for the portrait.
`onClick`	`MouseEventHandler<HTMLElement>`	`undefined`	Click handler.