# All files / src/Pill Pill.tsx

100% Statements 15/15
66.66% Branches 4/6
100% Functions 2/2
100% Lines 10/10

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
    519x
    9x

    9x

    9x

    1x
    1x
    1x

    9x
    2x

    2x

     import React from 'react'
    import { useI18nContext } from '../_hooks/I18n'
    import { Props, SVGAttributes } from '../_utils/types'
    import { StyledPill, StyledRemove } from './Pill.styles'
    import { PillColor, PillProps } from './Pill.types'

    type SVGAttributesWithPillColor = Omit<SVGAttributes, 'color'> & {
      color: PillColor
    }

    const Remove = React.forwardRef<
      SVGSVGElement,
      SVGAttributesWithPillColor & Props
    >(function TokenRemove({ color = 'gray', ...props }, ref) {
      const i18n = useI18nContext()
      return (
        <StyledRemove
          ref={ref}
          aria-hidden="false"
          aria-label={i18n.t('core.token.remove')}
          size="sm"
          $color={color}
          {...props}
        />
      )
    })

    /**

     Pills are used to highlight important information in a list or form such as
     a status.

     @since 10.19.0

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

     @see [Design Guidelines](https://design.procore.com/pill)

     */
    export const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(
      { color = 'gray', onClear, ...props },
      ref
    ) {
      return (
        <StyledPill $color={color} {...props} ref={ref}>
          {props.children}
          {onClear && <Remove color={color} onClick={onClear} tabIndex={0} />}
        </StyledPill>
      )
    })