# All files / segmented-button SegmentedButtonContainer.tsx

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

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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    591x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import type { HTMLAttributes, ReactNode } from "react";
    import { forwardRef } from "react";
    import { segmentedButtonContainerStyles } from "./segmentedButtonContainerStyles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface SegmentedButtonContainerProps
      extends HTMLAttributes<HTMLDivElement> {
      children: ReactNode;
    }

    /**
     * **Server Component**
     *
     * Simple wrapper `div` to apply the segmented button container styles. You can
     * just use the {@link segmentedButtonContainerStyles} util function instead.
     *
     * @example
     * Without This Component
     * ```tsx
     * import {
     *   SegmentedButton,
     *   segmentedButtonContainerStyles,
     * } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
     *
     * function Example(): ReactElement {
     *   return (
     *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>
     *       <SegmentedButton>One</SegmentedButton>
     *       <SegmentedButton>Two</SegmentedButton>
     *       <SegmentedButton>Three</SegmentedButton>
     *     </CustomWrapperComponent>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export const SegmentedButtonContainer = forwardRef<
      HTMLDivElement,
      SegmentedButtonContainerProps
    >(function SegmentedButtonContainer(props, ref) {
      const { className, children, ...remaining } = props;

      return (
        <div
          {...remaining}
          ref={ref}
          className={segmentedButtonContainerStyles({ className })}
        >
          {children}
        </div>
      );
    });