@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 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;