# All files Badge.tsx

100% Statements 56/56
100% Branches 2/2
100% Functions 2/2
100% Lines 56/56

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
    571x
    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
    6x
    6x
    6x
    6x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
     import { cnb } from "cnbuilder";
    import type { HTMLAttributes, ReactNode } from "react";
    import { forwardRef } from "react";
    import { bem } from "../utils";

    declare module "react" {
      interface CSSProperties {
        "--rmd-badge-size"?: string | number;
        "--rmd-badge-offset"?: string | number;
        "--rmd-badge-offset-top"?: string | number;
        "--rmd-badge-offset-right"?: string | number;
      }
    }

    const styles = bem("rmd-badge");

    /**
     * @remarks \@since 6.0.0 Renamed `"default"` to `"greyscale"`
     */
    export type BadgeTheme = "primary" | "secondary" | "greyscale" | "clear";

    export interface BadgeClassNameOptions {
      className?: string;

      /** @defaultValue `""greyscale` */
      theme?: BadgeTheme;
    }

    export function badge(options: BadgeClassNameOptions = {}): string {
      const { className, theme = "greyscale" } = options;

      return cnb(styles({ [theme]: theme !== "clear" }), className);
    }

    export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      /** @defaultValue `""greyscale` */
      theme?: BadgeTheme;

      children: ReactNode;
    }

    /**
     * @remarks \@since 6.0.0 Removed the `disableNullOnZero` feature since it's
     * easier just to use condition rendering yourself.
     */
    export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
      props,
      ref
    ) {
      const { children, className, theme, ...remaining } = props;
      return (
        <span {...remaining} ref={ref} className={badge({ theme, className })}>
          {children}
        </span>
      );
    });