import { KendoComponent } from '../_types/component';
/**
 * Badge component specification.
 *
 * @accessibility
 * - Badges render as `<span>` elements containing text or counts
 * - Content is accessible to screen readers via the text content
 * - When used as a notification indicator on another element, ensure
 *   the parent element has appropriate `aria-describedby` or `aria-label`
 *   to communicate the badge meaning to assistive technologies
 * - Empty/dot badges that convey status should be accompanied by visually
 *   hidden text for screen reader users
 *
 * @example
 * ```tsx
 * // Badge with visible text - accessible by default
 * <Badge>5 new messages</Badge>
 *
 * // Empty badge on button - needs aria context on parent
 * <button aria-label="Notifications, 3 unread">
 *   <span>Notifications</span>
 *   <Badge>3</Badge>
 * </button>
 * ```
 */
export declare const BADGE_CLASSNAME = "k-badge";
declare const options: {
    size: ("small" | "medium" | "large" | undefined)[];
    rounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
    fillMode: ("outline" | "solid" | undefined)[];
    themeColor: ("base" | "error" | "success" | "primary" | "secondary" | "tertiary" | "info" | "warning" | undefined)[];
};
export type KendoBadgeOptions = {
    size?: (typeof options.size)[number] | null;
    rounded?: (typeof options.rounded)[number] | null;
    fillMode?: (typeof options.fillMode)[number] | null;
    themeColor?: (typeof options.themeColor)[number] | null;
};
export type KendoBadgeProps = KendoBadgeOptions & {
    cutoutBorder?: boolean;
    position?: null | 'edge' | 'inside' | 'outside';
    align?: null | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
};
export declare const Badge: KendoComponent<KendoBadgeProps & React.HTMLAttributes<HTMLSpanElement>>;
export default Badge;