# All files / src/button ButtonUnstyled.tsx

100% Statements 42/42
100% Branches 1/1
100% Functions 1/1
100% Lines 42/42

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
    42
    431x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
     import { forwardRef, type ButtonHTMLAttributes } from "react";
    import { buttonUnstyled } from "./buttonUnstyledStyles.js";

    /**
     * The props for the unstyled button are just all the normal button html
     * attributes without the `type` since this component forces the `type="button"`
     * value.
     *
     * @remarks \@since 6.0.0 Renamed from `UnstyledButtonProps`
     */
    export type ButtonUnstyledProps = Omit<
      ButtonHTMLAttributes<HTMLButtonElement>,
      "type"
    >;

    /**
     * **Server Component**
     *
     * A simple wrapper for a `<button type="button">` that applies the unstyled
     * utility class.
     *
     * Requires the `$disable-unstyled-utility-class` to be `false` to use.
     *
     * @see {@link buttonUnstyled}
     * @remarks \@since 6.0.0 Renamed from `UnstyledButton`
     */
    export const ButtonUnstyled = forwardRef<
      HTMLButtonElement,
      ButtonUnstyledProps
    >(function ButtonUnstyled(props, ref) {
      const { children, className, ...remaining } = props;
      return (
        <button
          {...remaining}
          ref={ref}
          type="button"
          className={buttonUnstyled({ className })}
        >
          {children}
        </button>
      );
    });