Button

A `button`, or any element via `asChild` (Radix `Slot`). Disabled and loading are handled separately: native `disabled` only for a real disabled `button`; loading and slotted children get `aria-disabled` plus a click guard in the capture phase (`preventDefault` + `stopPropagation`), so a focused button keeps focus while busy and links can be blocked too. The press effect is a CSS `active:scale-[0.97]` with a transform transition, removed under `motion-reduce`. The loading spinner is a bordered circle with a transparent right edge spun by `animate-spin`, slowed to 2 s under reduced motion rather than stopped, so the busy state is still visible.

**Pebble (2026-11-03).** Primary is the lit key: `bg-linear-to-b from-key-top to-key-bottom ring-1 ring-key-edge shadow-[var(--key-shine),var(--elevation-sm)]`; pressed it flips to `bg-linear-to-t` and swaps the shine for `--key-press` (inset). Secondary is a raised card pebble (`ring-hairline shadow-raised-xs inset-shadow-highlight`) that loses its shadow on press. Outline uses a `ring-border` hairline, not a border, so all variants share one box size. Press is `translate-y-px scale-[0.97]` over `--motion-fast` with `ease-enter`; focus is a 2 px ember ring offset from the page. Sizes are compact (h-8/h-9/h-10); child SVGs are sized to 16 px by the root. Hover brightens the key by 10% instead of fading it, so it never looks disabled.

<!-- PEBBLE-LICENSE -->

registry/button/button/button.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: button.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { Slot } from "radix-ui";

import { cn } from "@/lib/utils";

// Pebble: primary is the lit key (gradient, edge ring, top shine; pressed it
// flips the gradient and swaps the shine for an inset). Secondary is a raised
// card-coloured pebble. Outline and ghost stay flat until hovered.
const variants = {
  primary:
    "bg-linear-to-b from-key-top to-key-bottom text-primary-foreground ring-1 ring-key-edge shadow-[var(--key-shine),var(--elevation-sm)] hover:shadow-[var(--key-shine),var(--elevation-md)] active:bg-linear-to-t active:shadow-[var(--key-press)]",
  secondary:
    "bg-card text-foreground ring-1 ring-hairline shadow-raised-xs inset-shadow-highlight hover:bg-muted/60 active:shadow-none active:inset-shadow-none",
  outline: "bg-transparent text-foreground ring-1 ring-border hover:bg-muted active:bg-muted/80",
  ghost: "bg-transparent text-foreground hover:bg-muted active:bg-muted/80",
} as const;

const sizes = {
  sm: "h-8 gap-1.5 px-3 text-[13px]",
  md: "h-9 gap-2 px-3.5 text-sm",
  lg: "h-10 gap-2 px-5 text-sm",
  icon: "size-9",
} as const;

export type ButtonProps = React.ComponentProps<"button"> & {
  variant?: keyof typeof variants;
  size?: keyof typeof sizes;
  loading?: boolean;
  asChild?: boolean;
};

export function Button({
  variant = "primary",
  size = "md",
  loading = false,
  asChild = false,
  disabled = false,
  className,
  children,
  type,
  tabIndex,
  onClick,
  onClickCapture,
  ...props
}: ButtonProps) {
  const Comp = asChild ? Slot.Root : "button";
  // Native `disabled` only for a real <button> with `disabled`. Loading and
  // slotted children use aria-disabled plus a click guard instead, so a
  // focused button keeps focus while it is busy and links can be blocked too.
  const nativeDisabled = !asChild && disabled;
  const blocked = disabled || loading;
  return (
    <Comp
      data-slot="button"
      // `type` only applies to a real <button>; a slotted child keeps its own.
      type={asChild ? undefined : (type ?? "button")}
      disabled={nativeDisabled || undefined}
      aria-disabled={(blocked && !nativeDisabled) || undefined}
      aria-busy={loading || undefined}
      tabIndex={asChild && disabled ? -1 : tabIndex}
      // Guard in the capture phase so it runs before any onClick, including
      // one set on a slotted child, and also stops form submission. A blocked
      // click is swallowed entirely, as a natively disabled button's would be.
      onClickCapture={(event: React.MouseEvent<HTMLButtonElement>) => {
        if (blocked) {
          event.preventDefault();
          event.stopPropagation();
          return;
        }
        onClickCapture?.(event);
      }}
      onClick={onClick}
      className={cn(
        "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "transition-[background-color,box-shadow,transform] duration-(--motion-fast) ease-enter",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "active:translate-y-px active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:translate-y-0 motion-reduce:active:scale-100",
        "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
        // A busy button stays fully visible; only `disabled` dims it.
        loading && !disabled && "aria-disabled:opacity-100",
        variants[variant],
        sizes[size],
        className,
      )}
      {...props}
    >
      {asChild ? (
        children
      ) : (
        <>
          {loading && (
            <span
              aria-hidden
              className="size-4 animate-spin rounded-full border-2 border-current border-r-transparent motion-reduce:[animation-duration:2s]"
            />
          )}
          {children}
        </>
      )}
    </Comp>
  );
}