Button

A button engineered as an interaction system — press physics, keyboard parity, motion tokens.

pnpm dlx shadcn@latest add @aster/button

Hold, then drag off before releasing - the press cancels instead of firing. Space behaves the same from the keyboard.

Interaction spec

A press begins on pointer-down, not on click. While pressed, the surface compresses (data-pressed); releasing inside fires the action, dragging off before release cancels it, matching native platform button physics.

Pointer down inside → pressed
Drag off while pressed → cancelled, no action
Pointer up inside → action fires (native click)
Space held → pressed; released → action fires
Enter → action fires immediately on key down

Interruption is free: state is attribute-driven, so a cancelled press transitions back through CSS mid-animation without JavaScript cleanup.

Accessibility

Native button semantics | no ARIA re-implementation.
Tab focuses; the focus ring appears only for keyboard focus (:focus-visible), never on pointer press.
disabled uses the native attribute: unfocusable and announced as unavailable by screen readers.

Motion

Press compression runs at --motion-dur-instant on the way down, response must feel immediate, and --motion-dur-fast on release. Every value comes from the motion tokens; nothing is hard-coded. Users with prefers-reduced-motion get state changes with no transform animation.

API

Button

Prop	Type	Default	Description
variant	`solid`\|`outline`\|`ghost`	"solid"	Visual style of the button surface.
size	`sm`\|`md`\|`lg`	"md"	Height and padding scale.
disabled	boolean	false	Disables interaction and press tracking.

All other native button props are forwarded, and event handlers compose with the press system instead of replacing it.

Source

1"use client";
2
3import { cva, type VariantProps } from "class-variance-authority";
4import { cn } from "@/registry/aster/lib/cn";
5import { useButton } from "./use-button";
6
7const buttonVariants = cva(
8  [
9    "inline-flex select-none items-center justify-center gap-2 squircle font-medium",
10    "outline-none focus-ring focus-visible:outline-none",
11    // Press physics: compression is immediate on the way down, eased on release.
12    "transition-[transform,background-color,color,border-color] duration-(--motion-dur-fast) ease-(--motion-ease-out)",
13    "data-pressed:scale-[0.97] data-pressed:duration-(--motion-dur-instant)",
14    "disabled:pointer-events-none disabled:opacity-45",
15    "motion-reduce:transition-none motion-reduce:data-pressed:scale-100",
16  ],
17  {
18    variants: {
19      variant: {
20        solid: "bg-foreground text-background hover:bg-foreground/85",
21        outline:
22          "border border-border bg-transparent text-foreground hover:bg-foreground/5",
23        ghost: "bg-transparent text-foreground hover:bg-foreground/5",
24      },
25      size: {
26        sm: "h-8 px-3 text-sm",
27        md: "h-10 px-4 text-sm",
28        lg: "h-12 px-6 text-base",
29      },
30    },
31    defaultVariants: {
32      variant: "solid",
33      size: "md",
34    },
35  },
36);
37
38export interface ButtonProps
39  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
40    VariantProps<typeof buttonVariants> {}
41
42export function Button({
43  className,
44  variant,
45  size,
46  disabled,
47  onPointerDown,
48  onPointerUp,
49  onPointerLeave,
50  onPointerCancel,
51  onKeyDown,
52  onKeyUp,
53  onBlur,
54  ...rest
55}: ButtonProps) {
56  const { buttonProps } = useButton({
57    disabled: disabled ?? false,
58    onPointerDown,
59    onPointerUp,
60    onPointerLeave,
61    onPointerCancel,
62    onKeyDown,
63    onKeyUp,
64    onBlur,
65  });
66
67  return (
68    <button
69      {...buttonProps}
70      {...rest}
71      className={cn(buttonVariants({ variant, size }), className)}
72    />
73  );
74}

Did you like the content?

Fader