import { ComponentPropsWithRef, ReactNode } from 'react';
declare const BadgeColor: {
    readonly add_on: "add_on";
    readonly assigned: "assigned";
    readonly caution: "caution";
    readonly destroy: "destroy";
    readonly info: "info";
    readonly success: "success";
    readonly upgrade: "upgrade";
};
declare const BadgeSize: {
    readonly small: "small";
    readonly medium: "medium";
};
type Size = (typeof BadgeSize)[keyof typeof BadgeSize];
type Color = (typeof BadgeColor)[keyof typeof BadgeColor];
type HTMLSpanProps = ComponentPropsWithRef<'span'>;
export type BadgeProps = HTMLSpanProps & {
    children: ReactNode;
    color?: Color;
    iconName?: string;
    size?: Size;
    testId?: string;
};
/**
The most common application for a Badge is in a list item, to display the status of an asset, event, or user - or to denote that something is new or is behind an updgraded plan paywall.

- For longer text, use [Notice](http://future.docs.page).
- Use `outline` icons inside Badge where possible.
- Badge should not be clickable itself, but can be part of a clickable element containing other items.
*/
export declare function Badge({ children, color, iconName, size, testId, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
export default Badge;