/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { SvgIconProps } from '@progress/kendo-vue-common'; import { ButtonInterface } from './ButtonInterface'; import { ButtonFocusEvent } from './models/ButtonFocusEvent'; import { ButtonBlurEvent } from './models/ButtonBlurEvent'; import { PropType } from 'vue'; /** * Represents the props of the [Kendo UI for Vue Button component]({% slug overview_button %}). * Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement). */ export interface ButtonProps extends ButtonInterface { /** * Configures the `size` of the Button. * * The available options are: * - small * - medium * - large * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Button. * * The available options are: * - none * - small * - medium * - large * - circle * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Button. * * The available options are: * - solid * - outline * - flat * - link * * @default `undefined` */ fillMode?: 'solid' | 'outline' | 'flat' | 'link'; /** * Configures the `themeColor` of the Button. * * The available options are: * - base * - primary * - secondary * - tertiary * - info * - success * - warning * - dark * - light * - inverse * * @default `undefined` */ themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse'; /** * Sets the `tabIndex` property of the Button. */ tabIndex?: number; /** * Sets the `accessKey` property of the Button. */ accessKey?: string; /** * Sets the `id` property of the Button. */ id?: string; /** * Sets the `type` property of the Button. */ type?: string; /** * Sets the `role` attribute of the Button. */ role?: string; /** * Sets the `aria-pressed` attribute of the Button. */ ariaPressed?: boolean; /** * defines the size of the SVG icon displayed inside the Button. */ iconSize?: SvgIconProps['size']; } /** * @hidden */ export interface ButtonState { _activeTemp?: boolean; } /** * @hidden */ export interface ButtonComputed { [key: string]: any; buttonClasses: object; } /** * @hidden */ export interface ButtonMethods { [key: string]: any; focus: (e: any) => void; toggleIfApplicable: () => void; handleClick: (event: any) => void; } /** * @hidden */ export interface ButtonData { currentActive: boolean; } /** * @hidden */ declare const Button: import('vue').DefineComponent; ariaPressed: PropType; title: PropType; dir: PropType; selected: { type: PropType; default: any; }; togglable: { type: PropType; default: boolean; }; icon: { type: PropType; default: () => any; }; svgIcon: PropType; iconSize: { type: PropType; }; iconClass: { type: PropType; default: () => any; }; imageUrl: { type: PropType; default: () => any; }; imageAlt: PropType; disabled: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; rounded: PropType<"small" | "medium" | "large" | "full" | "none">; fillMode: PropType<"flat" | "link" | "solid" | "outline">; themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">; tabIndex: PropType; accessKey: PropType; id: PropType; type: PropType; role: PropType; }>, {}, { currentActive: any; }, { computedSelected(): boolean; buttonClasses(): { [x: string]: any; 'k-icon-button': boolean; 'k-disabled': any; 'k-selected': any; 'k-rtl': boolean; }; }, { focus(e: any): void; toggleIfApplicable(): void; handleClick(event: any): void; handleMouseDown(event: any): void; handlePointerDown(event: any): void; handleMouseUp(event: any): void; handlePointerUp(event: any): void; handleFocus(event: FocusEvent): void; handleBlur(event: FocusEvent): void; handleKeypress(event: any): void; handleKeydown(event: any): void; handleContextmenu(event: any): void; }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { click: (event: Event) => true; mousedown: (event: MouseEvent) => true; mouseup: (event: MouseEvent) => true; pointerdown: (event: PointerEvent) => true; pointerup: (event: PointerEvent) => true; focus: (event: ButtonFocusEvent) => true; blur: (event: ButtonBlurEvent) => true; keypress: (event: KeyboardEvent) => true; keydown: (event: KeyboardEvent) => true; contextmenu: (event: MouseEvent) => true; }, string, import('vue').PublicProps, Readonly; ariaPressed: PropType; title: PropType; dir: PropType; selected: { type: PropType; default: any; }; togglable: { type: PropType; default: boolean; }; icon: { type: PropType; default: () => any; }; svgIcon: PropType; iconSize: { type: PropType; }; iconClass: { type: PropType; default: () => any; }; imageUrl: { type: PropType; default: () => any; }; imageAlt: PropType; disabled: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; rounded: PropType<"small" | "medium" | "large" | "full" | "none">; fillMode: PropType<"flat" | "link" | "solid" | "outline">; themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">; tabIndex: PropType; accessKey: PropType; id: PropType; type: PropType; role: PropType; }>> & Readonly<{ onClick?: (event: Event) => any; onBlur?: (event: ButtonBlurEvent) => any; onContextmenu?: (event: MouseEvent) => any; onFocus?: (event: ButtonFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onKeypress?: (event: KeyboardEvent) => any; onMousedown?: (event: MouseEvent) => any; onMouseup?: (event: MouseEvent) => any; onPointerdown?: (event: PointerEvent) => any; onPointerup?: (event: PointerEvent) => any; }>, { icon: string; selected: boolean; disabled: boolean; togglable: boolean; iconClass: string; imageUrl: string; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; export { Button };