@progress/kendo-react-buttons 13.3.0 → 13.4.0-develop.1

package/Button.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ButtonsClassStructure } from '@progress/kendo-react-common';
+import { ButtonInterface } from './ButtonInterface.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact Button component](https://www.telerik.com/kendo-react-ui/components/buttons/button).
+ * Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement).
+ */
+export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Configures the `size` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <Button size="large">Large Button</Button>
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <Button rounded="full">Rounded Button</Button>
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets the `title` HTML attribute of the Button.
+     */
+    title?: string;
+    /**
+     * Configures the `fillMode` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <Button fillMode="outline">Outline Button</Button>
+     * ```
+     */
+    fillMode?: 'solid' | 'outline' | 'flat' | 'link' | 'clear';
+    /**
+     * Configures the `themeColor` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <Button themeColor="primary">Primary Button</Button>
+     * ```
+     */
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+    /**
+     * Sets an SVG icon or custom element before the content of the Button. For the custom component, consider using
+     * [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).
+     * Do not use [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Sets an SVG icon or custom element after the content of the Button. For the custom component, consider using
+     * [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).
+     * Do not use [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * The unstyled option classes.
+     */
+    unstyled?: ButtonsClassStructure;
+    /**
+     * @hidden
+     */
+    ariaPressed?: boolean;
+    /**
+     * Configures the `size` of the SVG icon that displays inside the Button.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <Button svgIcon={searchIcon} iconSize="large">Search</Button>
+     * ```
+     */
+    iconSize?: 'small' | 'medium' | 'large';
+}
+/**
+ * @hidden
+ */
+export interface ButtonHandle {
+    /**
+     * Gets the DOM element of the Button component.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Returns `true` when the component is togglable and selected ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/toggleable)).
+     * Otherwise, returns `false`.
+     */
+    selected: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonHandle | null>>;

package/Button.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),l=require("prop-types"),e=require("@progress/kendo-react-common");function F(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const t=F(W);function G({imageUrl:n,name:r,iconClass:o,svgIcon:s,imageAlt:u,buttonClasses:i,iconSize:c}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:i})),alt:u,src:n}):r||s?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:i})),name:r,icon:s,size:c}):o?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:i}),o)}):null}const p=t.forwardRef((n,r)=>{const{children:o,togglable:s,dir:u,disabled:i,selected:c,icon:b,iconClass:v,svgIcon:y,imageUrl:N,imageAlt:M,className:P,startIcon:h,endIcon:B,onClick:C,size:S=g.size,rounded:k=g.rounded,fillMode:z=g.fillMode,themeColor:T=g.themeColor,ariaPressed:j,iconSize:A,...w}=n,q=()=>{s&&c===void 0&&(d.current=!a,O(!a))},U=f=>{q(),C&&C.call(void 0,f)},d=t.useRef(void 0),E=t.useRef(null),[a,O]=t.useState(s===!0&&c===!0),_=y!==void 0||b!==void 0||v!==void 0||N!==void 0,x=o!==void 0,D=e.useUnstyled(),R=n.unstyled||D,m=R&&R.uButton;t.useImperativeHandle(r,()=>({element:E.current,selected:d.current!==void 0?d.current:a})),t.useMemo(()=>{s&&c!==void 0&&c!==a&&O(c)},[s,c]),t.useEffect(()=>{d.current=void 0},[a]);const H=G({name:b,svgIcon:y,iconClass:v,imageUrl:N,imageAlt:M,buttonClasses:m,iconSize:A}),I=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>s?a:j||void 0,[]);return t.createElement("button",{ref:E,"aria-pressed":K,...w,dir:u,disabled:i,onClick:U,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:a,disabled:i,size:S,fillMode:z,rounded:k,themeColor:T,iconButton:!x&&_}),P)},h&&I(h),H,o&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},o),B&&I(B))}),g={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};p.displayName="KendoReactButton";p.propTypes={children:l.node,selected:l.bool,togglable:l.bool,icon:l.string,svgIcon:e.svgIconPropType,iconClass:l.string,imageUrl:l.string,imageAlt:l.string,size:l.oneOf([null,"small","medium","large"]),rounded:l.oneOf([null,"small","medium","large","full"]),fillMode:l.oneOf([null,"flat","link","outline","solid","clear"]),themeColor:l.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(l,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return l.default=n,Object.freeze(l)}const t=F(W);function G({imageUrl:n,name:l,iconClass:o,svgIcon:s,imageAlt:u,buttonClasses:a,iconSize:c}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:n}):l||s?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:s,size:c}):o?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),o)}):null}const g=t.forwardRef((n,l)=>{const{children:o,togglable:s,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:M,className:P,startIcon:h,endIcon:B,onClick:C,size:S=p.size,rounded:k=p.rounded,fillMode:z=p.fillMode,themeColor:T=p.themeColor,ariaPressed:j,iconSize:A,...w}=n,q=()=>{s&&c===void 0&&(d.current=!i,O(!i))},U=f=>{q(),C&&C.call(void 0,f)},d=t.useRef(void 0),E=t.useRef(null),[i,O]=t.useState(s===!0&&c===!0),_=y!==void 0||v!==void 0||b!==void 0||N!==void 0,x=o!==void 0,D=e.useUnstyled(),R=n.unstyled||D,m=R&&R.uButton;t.useImperativeHandle(l,()=>({element:E.current,selected:d.current!==void 0?d.current:i})),t.useMemo(()=>{s&&c!==void 0&&c!==i&&O(c)},[s,c]),t.useEffect(()=>{d.current=void 0},[i]);const H=G({name:v,svgIcon:y,iconClass:b,imageUrl:N,imageAlt:M,buttonClasses:m,iconSize:A}),I=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>s?i:j||void 0,[]);return t.createElement("button",{ref:E,"aria-pressed":K,...w,dir:u,disabled:a,onClick:U,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:i,disabled:a,size:S,fillMode:z,rounded:k,themeColor:T,iconButton:!x&&_}),P)},h&&I(h),H,o&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},o),B&&I(B))}),p={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};g.displayName="KendoReactButton";g.propTypes={children:r.node,selected:r.bool,togglable:r.bool,icon:r.string,svgIcon:e.svgIconPropType,iconClass:r.string,imageUrl:r.string,imageAlt:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full"]),fillMode:r.oneOf(["flat","link","outline","solid","clear"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=g;

package/Button.mjs

@@ -7,42 +7,42 @@
  */
 import * as e from "react";
 import t from "prop-types";
-import { useUnstyled as G, classNames as c, uButton as i, svgIconPropType as J, IconWrap as L } from "@progress/kendo-react-common";
-function Q({ imageUrl: a, name: d, iconClass: s, svgIcon: n, imageAlt: u, buttonClasses: r, iconSize: o }) {
+import { useUnstyled as G, classNames as i, uButton as c, IconWrap as J, svgIconPropType as L } from "@progress/kendo-react-common";
+function Q({ imageUrl: a, name: d, iconClass: s, svgIcon: o, imageAlt: u, buttonClasses: l, iconSize: n }) {
   return a ? /* @__PURE__ */ e.createElement(
     "img",
     {
       role: "presentation",
-      className: c(i.icon({ c: r })),
+      className: i(c.icon({ c: l })),
       alt: u,
       src: a
     }
-  ) : d || n ? /* @__PURE__ */ e.createElement(
-    L,
+  ) : d || o ? /* @__PURE__ */ e.createElement(
+    J,
     {
-      className: c(i.icon({ c: r })),
+      className: i(c.icon({ c: l })),
       name: d,
-      icon: n,
-      size: o
+      icon: o,
+      size: n
     }
-  ) : s ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: r }), s) }) : null;
+  ) : s ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: i(c.icon({ c: l }), s) }) : null;
 }
 const k = e.forwardRef((a, d) => {
   const {
     children: s,
-    togglable: n,
+    togglable: o,
     dir: u,
-    disabled: r,
-    selected: o,
+    disabled: l,
+    selected: n,
     icon: v,
     iconClass: h,
     svgIcon: y,
-    imageUrl: b,
+    imageUrl: C,
     imageAlt: A,
     className: B,
-    startIcon: C,
-    endIcon: E,
-    onClick: N,
+    startIcon: E,
+    endIcon: N,
+    onClick: b,
     size: P = g.size,
     rounded: O = g.rounded,
     fillMode: S = g.fillMode,
@@ -51,29 +51,29 @@ const k = e.forwardRef((a, d) => {
     iconSize: x,
     ...U
   } = a, H = () => {
-    n && o === void 0 && (m.current = !l, R(!l));
+    o && n === void 0 && (m.current = !r, R(!r));
   }, K = (p) => {
-    H(), N && N.call(void 0, p);
-  }, m = e.useRef(void 0), I = e.useRef(null), [l, R] = e.useState(n === !0 && o === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, j = s !== void 0, q = G(), z = a.unstyled || q, f = z && z.uButton;
+    H(), b && b.call(void 0, p);
+  }, m = e.useRef(void 0), I = e.useRef(null), [r, R] = e.useState(o === !0 && n === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || C !== void 0, j = s !== void 0, q = G(), z = a.unstyled || q, f = z && z.uButton;
   e.useImperativeHandle(d, () => ({
     element: I.current,
-    selected: m.current !== void 0 ? m.current : l
+    selected: m.current !== void 0 ? m.current : r
   })), e.useMemo(() => {
-    n && o !== void 0 && o !== l && R(o);
-  }, [n, o]), e.useEffect(() => {
+    o && n !== void 0 && n !== r && R(n);
+  }, [o, n]), e.useEffect(() => {
     m.current = void 0;
-  }, [l]);
+  }, [r]);
   const D = Q({
     name: v,
     svgIcon: y,
     iconClass: h,
-    imageUrl: b,
+    imageUrl: C,
     imageAlt: A,
     buttonClasses: f,
     iconSize: x
   }), M = (p) => e.cloneElement(p, {
-    className: c(i.icon({ c: f }), p.props.className)
-  }), F = e.useMemo(() => n ? l : w || void 0, []);
+    className: i(c.icon({ c: f }), p.props.className)
+  }), F = e.useMemo(() => o ? r : w || void 0, []);
   return /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -81,14 +81,14 @@ const k = e.forwardRef((a, d) => {
       "aria-pressed": F,
       ...U,
       dir: u,
-      disabled: r,
+      disabled: l,
       onClick: K,
-      className: c(
-        i.wrapper({
+      className: i(
+        c.wrapper({
           c: f,
           isRtl: u === "rtl",
-          selected: l,
-          disabled: r,
+          selected: r,
+          disabled: l,
           size: P,
           fillMode: S,
           rounded: O,
@@ -98,17 +98,16 @@ const k = e.forwardRef((a, d) => {
         B
       )
     },
-    C && M(C),
+    E && M(E),
     D,
-    s && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, s),
-    E && M(E)
+    s && /* @__PURE__ */ e.createElement("span", { className: i(c.text({ c: f })) }, s),
+    N && M(N)
   );
 }), g = {
-  togglable: !1,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
-  themeColor: "base"
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
+  themeColor: void 0
 };
 k.displayName = "KendoReactButton";
 k.propTypes = {
@@ -116,16 +115,15 @@ k.propTypes = {
   selected: t.bool,
   togglable: t.bool,
   icon: t.string,
-  svgIcon: J,
+  svgIcon: L,
   iconClass: t.string,
   imageUrl: t.string,
   imageAlt: t.string,
-  size: t.oneOf([null, "small", "medium", "large"]),
-  rounded: t.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: t.oneOf([null, "flat", "link", "outline", "solid", "clear"]),
+  size: t.oneOf(["small", "medium", "large"]),
+  rounded: t.oneOf(["small", "medium", "large", "full"]),
+  fillMode: t.oneOf(["flat", "link", "outline", "solid", "clear"]),
   // eslint-disable-next-line max-len
   themeColor: t.oneOf([
-    null,
     "base",
     "primary",
     "secondary",

package/ButtonGroup.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { ButtonsClassStructure } from '@progress/kendo-react-common';
+import { ButtonGroupInterface } from './ButtonGroupInterface.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact ButtonGroup component](https://www.telerik.com/kendo-react-ui/components/buttons/buttongroup).
+ */
+export interface ButtonGroupProps extends ButtonGroupInterface {
+    /**
+     * Sets the `className` of the ButtonGroup component.
+     * Specifies a list of CSS classes that will be added to the ButtonGroup element.
+     *
+     * @example
+     * ```jsx
+     * <ButtonGroup className="custom-group" />
+     * ```
+     */
+    className?: string;
+    /**
+     * @hidden
+     * Provides an option to use unstyled classes for the ButtonGroup component.
+     */
+    unstyled?: ButtonsClassStructure;
+}
+/**
+ * Represents the ButtonGroup component.
+ *
+ * @remarks
+ * Supported children components are: {@link Button}.
+ */
+export declare const ButtonGroup: {
+    (props: ButtonGroupProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+};

package/ButtonGroupInterface.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the properties which can be set to a ButtonGroup.
+ */
+export interface ButtonGroupInterface {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * By default, the ButtonGroup is enabled ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/buttongroup/disabled-state)). To disable the whole group of buttons, set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
+     *
+     * If you define the `disabled` attribute of the ButtonGroup, it takes precedence over the `disabled` attributes of the underlying buttons and they are ignored.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the width of the ButtonGroup.
+     *
+     * If the width of the ButtonGroup is set:
+     * — The buttons resize automatically to fill the full width of the group wrapper.
+     * — The buttons get the same width.
+     */
+    width?: string;
+    /**
+     * Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
+     *
+     * The available options are:
+     * * `rtl`
+     * * `ltr`
+     * * `auto`
+     */
+    dir?: string;
+}

package/ButtonInterface.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-react-common';
+/**
+ * Inherits the native HTML Button. Represents the properties which can be set to a Button.
+ */
+export interface ButtonInterface {
+    /**
+     * Specifies if the Button is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/disabled-state)).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the selected state of the Button. You can use this for controlled mode.
+     */
+    selected?: boolean;
+    /**
+     * Provides visual styling that shows if the Button is selected ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/toggleable)).
+     *
+     * @default false
+     */
+    togglable?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/icons)). The icon renders inside the Button by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon that renders inside the Button component.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines a CSS class — or multiple classes separated by spaces — which apply to a `span` element inside the Button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/icons)). Allows you to use custom icons.
+     */
+    iconClass?: string;
+    /**
+     * Defines a URL which is used as an `img` element inside the Button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/button/icons)). The URL can be relative or absolute. If relative, it evaluates in relation to the URL of the web page.
+     */
+    imageUrl?: string;
+    /**
+     * Defines the alternative text of the image that renders inside the Button component.
+     */
+    imageAlt?: string;
+}