# All files / src/components/display Button.tsx

100% Statements 3/3
100% Branches 2/2
100% Functions 1/1
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41

    16x

    157x

    157x

     import { forwardRef, type ButtonHTMLAttributes, type JSX } from "react";
    import type React from "react";
    import { type ButtonBuiltinProps, type ButtonVariant, type ButtonSize } from "@grackle-ai/common";
    import styles from "./Button.module.scss";

    // The variant/size unions now live in the built-in's zod schema
    // (@grackle-ai/common); re-export them so existing imports from "./Button.js"
    // (SplitButton, the package barrel) keep resolving.
    export type { ButtonVariant, ButtonSize };

    /**
     * Props for the {@link Button} component. The agent-facing data props (variant,
     * size) are inferred from the built-in's zod schema so the GenUX catalog can't
     * drift from the component; `disabled` and the rest come from the native button
     * attributes.
     */
    export interface ButtonProps
      extends ButtonHTMLAttributes<HTMLButtonElement>,
        Omit<ButtonBuiltinProps, "disabled"> {}

    /**
     * Standardized button with consistent sizing and styling across the app.
     *
     * Uses the existing mixin-based design tokens so colours/radii stay in sync
     * with the rest of the UI.
     */
    export const Button: React.ForwardRefExoticComponent<
      ButtonProps & React.RefAttributes<HTMLButtonElement>
    > = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
      { variant = "primary", size = "md", className, children, ...rest }: ButtonProps,
      ref: React.ForwardedRef<HTMLButtonElement>,
    ): JSX.Element {
      const cls = [styles.btn, styles[variant], styles[size], className].filter(Boolean).join(" ");

      return (
        <button ref={ref} className={cls} {...rest}>
          {children}
        </button>
      );
    });