@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
46 lines (45 loc) • 1.85 kB
TypeScript
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;