Skip to content

Button should be forwardRef so consumers can attach refs #37

Description

@TheGreatAxios

Button in src/ui/button.tsx is a plain function component:

export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : "button";
  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size }), className)} {...props} />;
}

It is not wrapped in React.forwardRef, so a consumer passing ref gets no DOM node and no compile-time warning — the ref silently does nothing.

Motivating case: workbench's stage-search.tsx needs ref={buttonRef} to restore keyboard focus to the trigger button after its command palette closes. During a recent pass converting workbench's raw controls to react-ui primitives (corbitsdev/workbench#217), this site had to stay on a raw <button> specifically because swapping to Button would have silently broken that focus restoration.

Ask: wrap Button in React.forwardRef<HTMLButtonElement, ButtonProps> (mirroring how ref-forwarding is presumably already handled for any other interactive primitives in this library), so ref works whether asChild is set or not.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions