import { HTMLAttributes } from 'react';
import { ElementBorder, ElementElevation, ElementFont, ElementPlacement, ElementShape, ElementSize } from '../../utils';
import { BorderColor, SemanticColor } from '../../utils/color';
/**
 * Props for the Badge component.
 *
 * Small visual indicator used to display a value or status.
 *
 * @category Badge
 */
export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'ref' | 'size'> {
    /** Position relative to the parent element. */
    align?: ElementPlacement;
    /** Accessible label for screen readers when badge conveys information. */
    ariaLabel?: string;
    /** Border width when outlined. */
    border?: ElementBorder;
    /** Border color when outlined. */
    borderColor?: BorderColor;
    /** Semantic background color. */
    color?: SemanticColor;
    /** Elevation level for raised appearance. */
    elevation?: ElementElevation;
    /** Font token applied to the badge text. */
    font?: ElementFont;
    /** Visual offset applied to the badge position. */
    offset?: number;
    /** Shape of the badge. */
    shape?: ElementShape;
    /** Visual size of the badge. */
    size?: ElementSize;
    /** Value displayed inside the badge. */
    value: string | number;
}
/**
 * Displays a small badge with a value or indicator.
 *
 * Can be rendered standalone or attached to a child element.
 * When size is small or extraSmall, the value is hidden.
 *
 * @function Badge
 * @param props Component properties.
 *
 * @example
 * <Badge value={3} color="info" />
 *
 * @example
 * <Badge value={5} color="warning">
 *   <Button />
 * </Badge>
 *
 * @category Badge
 */
export declare const Badge: {
    (props: BadgeProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};