# All files / src/ToggleButton ToggleButton.tsx

100% Statements 11/11
100% Branches 4/4
100% Functions 1/1
100% Lines 6/6

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
    452x
    2x

    2x

    15x

    15x

    2x
     import React from 'react'
    import { StyledToggleButton } from './ToggleButton.styles'
    import { ToggleButtonProps } from './ToggleButton.types'

    /**

     A toggle button can be used when an element needs to remain active or open
     for extended periods of time. The affects of a toggle button should visibly
     change content on the page.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-togglebutton--demo)

     @see [Design Guidelines](https://design.procore.com/toggle-button)

     @a11y  @a11y Important: it is critical the label on a toggle does not change when its `selected` prop changes. Alternatively, if the design were to call for the button label to change from "Mute" to "Unmute," the `aria-pressed` prop should be set to `undefined`.

     @see https://www.w3.org/WAI/ARIA/apg/patterns/button/

     */
    export const ToggleButton = React.forwardRef<
      HTMLButtonElement,
      ToggleButtonProps
    >(function ToggleButton(
      { children, selected = false, icon, size, ...props },
      ref
    ) {
      return (
        <StyledToggleButton
          aria-pressed={selected}
          {...props}
          $selected={selected}
          icon={icon}
          size={size}
          variant="tertiary"
          ref={ref}
        >
          {children || null}
        </StyledToggleButton>
      )
    })

    ToggleButton.displayName = 'ToggleButton'