Button

Once per app, add the registry to components.json:

{
  "registries": {
    "@pixilui": "https://pixilui.com/r/{name}.json"
  }
}

Or install from the URL, no namespace needed: npx shadcn@latest add https://pixilui.com/r/button.json

1. 1

   Install the npm packages.

   TerminalCopy

   npm install motion clsx tailwind-merge

2. 2

   Add the items it depends on, the same way.

   • Foundation
3. 3

   Copy each file to the path shown.

   components/pixilui/button.tsxCopy

   "use client";
   
   import {
     forwardRef,
     useCallback,
     useRef,
     type ComponentPropsWithoutRef,
     type KeyboardEvent,
     type MouseEvent,
     type PointerEvent,
     type ReactNode,
   } from "react";
   import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react";
   import { cn } from "./lib/utils";
   import { useMorphSize } from "./lib/use-morph-size";
   import { motionTokens, reducedTransition } from "./motion-tokens";
   
   type ButtonOwnProps = {
     /** Visual weight. Keep one primary per surface. */
     variant?: "primary" | "secondary" | "ghost" | "danger";
     /** Control height: sm is 36px, md 44px, lg 50px. */
     size?: "sm" | "md" | "lg";
     /** Shows a spinner, sets aria-busy and aria-disabled, and ignores presses. Focus stays on the button. */
     loading?: boolean;
     /** Leading icon. The spinner takes its place while loading. */
     icon?: ReactNode;
     /** Trailing icon, after the label. */
     iconEnd?: ReactNode;
   };
   
   type ButtonLabelProps =
     | {
         /** The label. When it changes, the button morphs to the new width and the words swap. */
         children: ReactNode;
       }
     | {
         children?: undefined;
         /** Icon-only buttons need an accessible name. */
         "aria-label": string;
         icon: ReactNode;
       };
   
   export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonOwnProps & ButtonLabelProps;
   
   const variants = {
     primary: "bg-accent-solid text-accent-contrast shadow-control inset-shadow-highlight hover-fine:bg-accent-solid/90",
     secondary: "bg-surface text-foreground shadow-control hairline hairline-strong hover-fine:bg-surface-muted",
     ghost: "bg-transparent text-foreground hover-fine:bg-surface-muted",
     danger: "bg-danger text-danger-foreground shadow-resting hover-fine:bg-danger/90",
   } as const;
   
   const sizes = {
     sm: "h-control-sm px-3.5 text-14",
     md: "h-control-md px-4 text-14",
     lg: "h-control-lg px-5 text-16",
   } as const;
   
   const gaps = { sm: "gap-1.5", md: "gap-2", lg: "gap-2" } as const;
   
   const iconOnlySizes = {
     sm: "w-control-sm px-0",
     md: "w-control-md px-0",
     lg: "w-control-lg px-0",
   } as const;
   
   function labelKeyOf(children: ReactNode) {
     return typeof children === "string" || typeof children === "number" ? String(children) : "node";
   }
   
   /** A ring that turns while work is in flight. Still under reduced motion. */
   function ButtonSpinner() {
     return (
       <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className="animate-spin motion-reduce:animate-none">
         <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeOpacity="0.25" strokeWidth="1.5" />
         <path d="M14.25 8A6.25 6.25 0 0 0 8 1.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
       </svg>
     );
   }
   
   export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
       variant = "primary",
       size = "md",
       loading = false,
       icon,
       iconEnd,
       children,
       type = "button",
       disabled,
       className,
       onClick,
       onPointerDown,
       onPointerUp,
       onPointerLeave,
       onPointerCancel,
       onKeyDown,
       onKeyUp,
       "aria-disabled": ariaDisabledProp,
       ...rest
     },
     forwardedRef,
   ) {
     const reduced = useReducedMotion();
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const labelKey = labelKeyOf(children);
     const { containerRef, measureRef } = useMorphSize<HTMLSpanElement, HTMLSpanElement>("width", labelKey);
     const ariaDisabled = ariaDisabledProp === true || ariaDisabledProp === "true";
     const inert = loading || ariaDisabled || Boolean(disabled);
     const iconOnly = children === undefined || children === null;
   
     const setRef = useCallback(
       (node: HTMLButtonElement | null) => {
         buttonRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
       [forwardedRef],
     );
   
     const press = (down: boolean) => {
       const el = buttonRef.current;
       if (!el || reduced || (down && inert)) return;
       animate(el, { scale: down ? motionTokens.scale.press : 1 }, motionTokens.spring.snappy);
     };
   
     const swap = reduced ? reducedTransition : { duration: motionTokens.duration.quick, ease: motionTokens.ease.swap };
     const blur = `blur(${motionTokens.blur.subtle}px)`;
   
     return (
       <button
         ref={setRef}
         type={type}
         disabled={disabled}
         aria-busy={loading || undefined}
         aria-disabled={loading || ariaDisabled || undefined}
         data-variant={variant}
         data-size={size}
         data-loading={loading ? "" : undefined}
         className={cn(
           "relative inline-flex max-w-full shrink-0 select-none items-center justify-center whitespace-nowrap rounded-control font-body font-medium outline-none",
           "transition-[background-color,color,box-shadow,opacity] duration-instant ease-swap",
           "focus-visible:focus-ring disabled:opacity-50 aria-disabled:cursor-not-allowed aria-busy:cursor-progress",
           "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
           sizes[size],
           iconOnly && iconOnlySizes[size],
           variants[variant],
           className,
         )}
         onClick={(event: MouseEvent<HTMLButtonElement>) => {
           if (loading || ariaDisabled) {
             event.preventDefault();
             return;
           }
           onClick?.(event);
         }}
         onPointerDown={(event: PointerEvent<HTMLButtonElement>) => {
           if (event.button === 0) press(true);
           onPointerDown?.(event);
         }}
         onPointerUp={(event: PointerEvent<HTMLButtonElement>) => {
           press(false);
           onPointerUp?.(event);
         }}
         onPointerLeave={(event: PointerEvent<HTMLButtonElement>) => {
           press(false);
           onPointerLeave?.(event);
         }}
         onPointerCancel={(event: PointerEvent<HTMLButtonElement>) => {
           press(false);
           onPointerCancel?.(event);
         }}
         onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {
           if ((event.key === " " || event.key === "Enter") && !event.repeat) press(true);
           onKeyDown?.(event);
         }}
         onKeyUp={(event: KeyboardEvent<HTMLButtonElement>) => {
           press(false);
           onKeyUp?.(event);
         }}
         {...rest}
       >
         <span ref={containerRef} className="relative inline-flex min-w-0 max-w-full items-center overflow-hidden">
           <span ref={measureRef} className={cn("inline-flex w-max min-w-0 shrink-0 items-center", gaps[size])}>
             {loading ? <ButtonSpinner /> : icon}
             {!iconOnly && (
               <AnimatePresence initial={false} mode="popLayout">
                 <motion.span
                   key={labelKey}
                   className="truncate"
                   initial={reduced ? { opacity: 0 } : { opacity: 0, filter: blur }}
                   animate={{ opacity: 1, filter: "blur(0px)" }}
                   exit={reduced ? { opacity: 0 } : { opacity: 0, filter: blur, transition: { duration: motionTokens.duration.instant } }}
                   transition={swap}
                 >
                   {children}
                 </motion.span>
               </AnimatePresence>
             )}
             {iconEnd}
           </span>
         </span>
       </button>
     );
   });

4. 4

   Check that your global stylesheet imports the foundation, after Tailwind.

   app/globals.cssCopy

   @import "tailwindcss";
   @import "../components/pixilui/foundation.css";