# All files / badge Badge.tsx

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

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
    941x
    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
    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
    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;
    }

    /**
     * **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>
      );
    });