@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
62 lines (61 loc) • 2.47 kB
TypeScript
import { Size } from '../misc';
import { KendoComponent } from '../_types/component';
export declare const BUTTON_CLASSNAME = "k-button";
declare const BUTTON_VARIANTS: readonly ["icon-button"];
declare const states: readonly ["hover", "focus", "active", "selected", "disabled", "generating"];
declare const options: {
size: ("small" | "medium" | "large" | "xsmall" | undefined)[];
rounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
fillMode: ("link" | "flat" | "clear" | "outline" | "solid" | undefined)[];
themeColor: ("base" | "error" | "inverse" | "success" | "primary" | "secondary" | "tertiary" | "info" | "warning" | undefined)[];
};
export type KendoButtonOptions = {
size?: (typeof options.size)[number] | null;
rounded?: (typeof options.rounded)[number] | null;
fillMode?: (typeof options.fillMode)[number] | null;
themeColor?: (typeof options.themeColor)[number] | null;
variant?: (typeof BUTTON_VARIANTS)[number] | null;
};
export type KendoButtonProps = KendoButtonOptions & {
icon?: string | React.ReactNode;
iconSize?: typeof Size[keyof typeof Size];
text?: string;
iconClassName?: string;
showArrow?: boolean;
arrowIconName?: string;
/**
* When true, the button acts as a toggle button with aria-pressed attribute.
* @aria aria-pressed="true"|"false" based on selected state
*/
togglable?: boolean;
/**
* When true, the button is visually disabled and announced as disabled to AT,
* but remains focusable (no native `disabled` attribute).
* @aria aria-disabled="true" and k-disabled class without native disabled
*/
ariaDisabled?: boolean;
};
export type KendoButtonState = {
[K in (typeof states)[number]]?: boolean;
};
/**
* Button component - interactive button element.
*
* @accessibility
* - Uses semantic `<button>` element (role="button" is implicit)
* - Icon-only buttons MUST have `aria-label` prop for accessible name
* - Disabled state uses native `disabled` attribute
*
* @example
* ```tsx
* // Text button - accessible name from content
* <Button>Save</Button>
*
* // Icon-only button - requires aria-label
* <Button icon="close" aria-label="Close dialog" />
* ```
*
* @wcag 4.1.2 Name, Role, Value - button must have accessible name
*/
export declare const Button: KendoComponent<KendoButtonProps & KendoButtonState & React.HTMLAttributes<HTMLButtonElement>>;
export default Button;