import { type HTMLAttributes, type ReactNode } from "react";
import { type BadgeTheme } from "./styles.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-badge-border-radius"?: string | number;
        "--rmd-badge-greyscale-background-color"?: string;
        "--rmd-badge-greyscale-color"?: string;
        "--rmd-badge-size"?: string | number;
        "--rmd-badge-offset"?: string | number;
        "--rmd-badge-offset-top"?: string | number;
        "--rmd-badge-offset-right"?: string | number;
    }
}
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
    /** @defaultValue `"greyscale"` */
    theme?: BadgeTheme;
    children: ReactNode;
}
/**
 * @example Simple Example
 * ```tsx
 * import { Badge } from "@react-md/core/badge/Badge";
 * import { Button } from "@react-md/core/button/Button";
 * import { type ReactElement } from "react";
 *
 * 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 { Badge } from "@react-md/core/badge/Badge";
 * import { Button } from "@react-md/core/button/Button";
 * import { MaterialSymbol } from "@react-md/core/icon/MaterialSymbol";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Button aria-label="Notifications" buttonType="icon">
 *       <Badge>88</Badge>
 *       <MaterialSymbol name="notifications" />
 *     </Button>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/badge | Badge Demos}
 * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
 * easier just to use condition rendering yourself.
 */
export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
