@progress/kendo-react-buttons/Button.js

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

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