# All files / src/badge Badge.tsx

100% Statements 99/99
100% Branches 5/5
100% Functions 2/2
100% Lines 99/99

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
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    1001x
    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
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { cssUtils, type BackgroundColor } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";

    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"` and added all
     * theme colors.
     */
    export type BadgeTheme = BackgroundColor | "greyscale" | "clear";

    export interface BadgeClassNameOptions {
      className?: string;

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

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

      return cnb(
        styles({ greyscale }),
        cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),
        className
      );
    }

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

      children: ReactNode;
    }

    /**
     * **Server Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import type { ReactElement } from "react";
     * import { Badge, Button, MaterialSymbol } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   return (
     *     <>
     *       <Badge>3</Badge>
     *       <Badge theme="primary">100</Badge>
     *       <Badge theme="secondary">23</Badge>
     *       <Badge theme="greyscale">18</Badge>
     *       <Badge theme="clear">1</Badge>
     *     </>
     *   );
     * }
     * ```
     *
     * @example
     * Within Buttons Example
     * ```tsx
     * import type { ReactElement } from "react";
     * import { Badge, Button, MaterialSymbol } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   return (
     *     <Button aria-label="Notifications" buttonType="icon">
     *       <Badge>88</Badge>
     *       <MaterialSymbol name="notifications" />
     *     </Button>
     *   );
     * }
     * ```
     *
     * @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>
        );
      }
    );