New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@progress/kendo-react-buttons
Advanced tools
@progress/kendo-react-buttons - npm Package Compare versions
Comparing version 10.0.0-develop.3 to 10.0.0-develop.4
@@ -8,2 +8,2 @@ /** | ||
| */ | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741268978,version:"10.0.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e; | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741334929,version:"10.0.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e; |
| { | ||
| "name": "@progress/kendo-react-buttons", | ||
| "version": "10.0.0-develop.3", | ||
| "version": "10.0.0-develop.4", | ||
| "description": "All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package", | ||
@@ -29,4 +29,4 @@ "author": "Progress", | ||
| "@progress/kendo-licensing": "^1.5.0", | ||
| "@progress/kendo-react-common": "10.0.0-develop.3", | ||
| "@progress/kendo-react-popup": "10.0.0-develop.3", | ||
| "@progress/kendo-react-common": "10.0.0-develop.4", | ||
| "@progress/kendo-react-popup": "10.0.0-develop.4", | ||
| "@progress/kendo-svg-icons": "^4.0.0", | ||
@@ -57,3 +57,3 @@ "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", | ||
| "productCode": "KENDOUIREACT", | ||
| "publishDate": 1741268978, | ||
| "publishDate": 1741334929, | ||
| "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/" | ||
@@ -60,0 +60,0 @@ } |
240
README.md
@@ -9,5 +9,7 @@ <a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons&utm_content=banner" target="_blank"> | ||
| > | ||
| > - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons)—a commercial UI library. | ||
| > - You will need to install a license key when adding the package to your project. For more information, please refer to the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons). | ||
| > - To receive a license key, you need to either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons). Doing so indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons). | ||
| > - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons)—an enterprise-grade UI library with 120+ free and premium components. | ||
| > - This package contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons). You can use the free components even in production, no sign-up or license required. | ||
| > - If you're looking for free React components, check out [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free). | ||
| > - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) to learn how to configure your KendoReact licensing. | ||
| > - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons). | ||
| > - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team! | ||
@@ -17,96 +19,241 @@ > | ||
| What's in this package (ToC): | ||
| The React Buttons package, part of KendoReact, includes a rich selection of fully configurable button types that help you create stylish and practical applications. | ||
| - [React Button component](#react-button-component) | ||
| - [React ButtonGroup component](#react-buttongroup-component) | ||
| - [React Chip component](#react-chip-component) | ||
| - [React ChipList component](#react-chiplist-component) | ||
| - [React DropDown Button component](#react-dropdown-button-component) | ||
| - [React FloatingActionButton component](#react-floating-action-button-component) | ||
| - [React SplitButton component](#react-splitbutton-component) | ||
| - [React Toolbar component](#react-toolbar-component) | ||
| - [React Buttons Components Library Features](#react-buttons-library-shared-features) | ||
| How to start: | ||
| ```sh | ||
| npm install --save @progress/kendo-react-buttons @progress/kendo-react-popup @progress/kendo-popup-common @progress/kendo-svg-icons @progress/kendo-licensing | ||
| ``` | ||
| What's in this package: | ||
| - [React Buttons Components Libray Features](#react-buttons-components-library-features) | ||
| - [React Button component (free)](#react-button-component) | ||
| - [React ButtonGroup component (free)](#react-buttongroup-component) | ||
| - [React Chip component (free)](#react-chip-component) | ||
| - [React ChipList component (free)](#react-chiplist-component) | ||
| - [React DropDownButton component (premium)](#react-dropdownbutton-component) | ||
| - [React FloatingActionButton component (free)](#react-floatingactionbutton-component) | ||
| - [React SplitButton component (premium)](#react-splitbutton-component) | ||
| - [React Toolbar component (free)](#react-toolbar-component) | ||
| Additional information: | ||
| - [Support Options](#support-options) | ||
| - [Resources](#resources) | ||
| - [KendoReact Buttons API](https://www.telerik.com/kendo-react-ui/components/buttons/api) | ||
| ## React Buttons Components Library Features | ||
| Here are some of the features shared across all components included in the package (this is not an exhaustive list): | ||
| - **Disabled state**—To disable user interaction, just change a single property. | ||
| - **Custom rendering**—You can replace the content of the buttons with custom icons, text and elements. | ||
| - **Keyboard navigation**—You can interact with the buttons using only the keyboard. | ||
| - **Accessibility support**—The Buttons are compliant with WAI-ARIA and Section 508. | ||
| - [**Theme support**](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons)—The KendoReact Buttons, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines. | ||
| ## React Button Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The React Button](https://www.telerik.com/kendo-react-ui/components/buttons/button/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) provides a clickable UI functionality and enables you to display only textual content, or show predefined icons, images and custom icons, and to render a combination of textual and image content. | ||
| ### Key Features | ||
| Key features: | ||
| - **Primary Button**—As a part of several built-in styles for the KendoReact Button, the Primary Button provides a unique highlighted look and feel to the React Button component. | ||
| - **Toggleable Button**—A KendoReact Button that can be toggled showcases a clear representation between the default rendering of the Button and when the Button has been pressed. | ||
| - **Globalization**—The React Button supports being rendered in a right-to-left mode, allowing for it to be used in any globalization or localization scenarios. | ||
| - [Primary Button](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance#theme-colors)—As a part of several built-in styles for the KendoReact Button, the Primary Button provides a unique highlighted look and feel to the React Button component. | ||
| - [Toggleable Button](https://www.telerik.com/kendo-react-ui/components/buttons/button/toggleable)—A KendoReact Button that can be toggled showcases a clear representation between the default rendering of the Button and when the Button has been pressed. | ||
| - [Unstyled mode](https://www.telerik.com/kendo-react-ui/components/unstyled)—The KendoReact Button supports an unstyled mode, offering complete control over the Button appearance. | ||
| How to use the Button component in your apps: | ||
| ```tsx | ||
| import { Button } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <Button> | ||
| Button Label | ||
| </Button> | ||
| ``` | ||
| ## React ButtonGroup Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The KendoReact ButtonGroup](https://www.telerik.com/kendo-react-ui/components/buttons/buttongroup/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) is a container for two or more React Button components which can be separately configured to display only textual content, or show predefined icons, images and custom icons. | ||
| How to use the ButtonGroup component in your apps: | ||
| ```tsx | ||
| import { Button, ButtonGroup } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <ButtonGroup> | ||
| /** | ||
| * Insert the <Button> components that you want to display as a group here. | ||
| */ | ||
| </ButtonGroup> | ||
| ``` | ||
| ## React Chip Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The React Chip component](https://www.telerik.com/kendo-react-ui/components/buttons/chip/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) is responsible for a single Chip (also called React Pill) and can contain text, an image or avatar (optional) and a built-in icon, such as an "X," to indicate that an action can be taken. | ||
| ### Key Features | ||
| Key features: | ||
| - **Removable Chip**—Through the removable property, React developers can configure whether the KendoReact Chip component should provide a built-in “X” icon to allow users to remove the Chip. | ||
| - **Chip Types**—To provide as much flexibility as possible, the React Chip component has several readily available types, each with its own unique style. | ||
| - **Appearance**—The KendoReact Chip component has two built-in appearance options. The filled option sets a background color of the React Chip and fills in the entire content area. | ||
| - [Removable Chip](https://www.telerik.com/kendo-react-ui/components/buttons/chip/remove)—Through the removable property, React developers can configure whether the KendoReact Chip component should provide a built-in “X” icon to allow users to remove the Chip. | ||
| - [Avatars and icons](https://www.telerik.com/kendo-react-ui/components/buttons/chip/appearance#chip-with-avatars)—The React Chip component lets you add avatars and font or SVG icons to create more compelling and user-friendly interfaces. | ||
| - [Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/chip/appearance)—The KendoReact Chip component provides the `size`, `fillMode`, `rounded`, and `themeColor` properties to let you control its look and feel. | ||
| How to use the Chip component in your apps: | ||
| ```tsx | ||
| import { Chip } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <Chip | ||
| text={'Chip Label'} | ||
| /> | ||
| ``` | ||
| ## React ChipList Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The React ChipList component](https://www.telerik.com/kendo-react-ui/components/buttons/chiplist/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) takes the React Chip and provides additional functionality related to managing a collection of KendoReact Chip components. | ||
| ### Key Features | ||
| Key features: | ||
| - **Selection Mode**—To ensure flexibility, the KendoReact ChipList component provides several selection modes.The default mode is “none”, which means no chips can be selected, yet you can enable single and multiple selection to help users manage their items individually or in bulk. | ||
| - **Data Binding**—As the KendoReact ChipList component deals with displaying and manipulating a collection of items, you can bind it to different data sources. | ||
| - [Selection mode](https://www.telerik.com/kendo-react-ui/components/buttons/chiplist/selection-mode)—To ensure flexibility, the KendoReact ChipList component provides several selection modes.The default mode is “none”, which means no chips can be selected, yet you can enable single and multiple selection to help users manage their items individually or in bulk. | ||
| - [Data Binding](https://www.telerik.com/kendo-react-ui/components/buttons/chiplist/data-binding)—As the KendoReact ChipList component deals with displaying and manipulating a collection of items, you can bind it to different data sources. | ||
| How to use the ChipList component in your apps: | ||
| ```tsx | ||
| import { ChipList } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| /** | ||
| * Introduce the data that you will use to populate the ChipList with chips. | ||
| */ | ||
| <ChipList | ||
| data={data} | ||
| /> | ||
| ``` | ||
| ## React DropDown Button Component | ||
| > This is a KendoReact **premium component** and requires a commercial license or an active trial license. | ||
| [The React DropDownButton component](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) displays a popup list with action items and provides options for enabling or disabling its content, displaying icons, and binding it to data. | ||
| ### Key Features | ||
| Key features: | ||
| - **Icon DropDownButton**—The KendoReact DropDownButton can be displayed as just an icon, or with a mix of text and icons as a part of its main content. | ||
| - **Data Binding**—Beyond being declaratively built, the KendoReact DropDownButton component can be data bound to an array of strings or an array of objects. | ||
| - [Icon DropDownButton](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/icons)—The KendoReact DropDownButton can be displayed as just an icon or with a mix of text and icons as a part of its main content. | ||
| - [Data Binding](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/data-binding)—Beyond being declaratively built, the KendoReact DropDownButton component can be data bound to an array of strings or an array of objects. | ||
| - [Unstyled mode](https://www.telerik.com/kendo-react-ui/components/unstyled)—The KendoReact DropDownButton supports an unstyled mode, offering complete control over its appearance. | ||
| ## React Floating Action Button Component | ||
| How to use the DropDownButton with hardcoded data: | ||
| ```tsx | ||
| import { DropDownButton, DropDownButtonItem } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <DropDownButton text="DropDownButton Label"> | ||
| <DropDownButtonItem text="Item 1 Label" /> | ||
| <DropDownButtonItem text="Item 2 Label" /> | ||
| </DropDownButton> | ||
| ``` | ||
| How to use the DropDownButton with simple data binding: | ||
| ```tsx | ||
| import { DropDownButton } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| /** | ||
| * Provide an array of items for the drop-down here. | ||
| */ | ||
| <DropDownButton | ||
| items={items} | ||
| text="DropDownButton Label" | ||
| /> | ||
| ``` | ||
| ## React FloatingActionButton Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The KendoReact Floating Action Button](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) is a button that appears to “float” above the content of any React application, usually serving as a shortcut to a single, common action like adding an item or composing a new email. | ||
| ### Key Features | ||
| Key features: | ||
| - **Content Types**—The content within the KendoReact Floating Action Button can be completely customized through the available properties. Access the icon, iconClass and text properties to define the React Floating Action Button icon, apply a custom CSS class to control the style of the button and set text displayed within the component. | ||
| - **Speed Dial**—If additional action items should be available to users, the speed dial feature of the KendoReact Floating Action Button is the perfect solution. | ||
| - **Positioning**—The KendoReact Floating Action Button provides several configuration options to assist with defining where the React component should be displayed within the application. The position can be set through easy-to-remember options like “start”, “center”, “end”, “top”, “middle” and “bottom”. | ||
| - [Content Types](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/content-types)—The content within the KendoReact Floating Action Button can be completely customized through the available properties. Access the `icon`, `iconClass` and `text` properties to define the React Floating Action Button icon, apply a custom CSS class to control the style of the button, and set text displayed within the component. | ||
| - [Speed Dial](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/speed-dial)—If additional action items should be available to users, the speed dial feature of the KendoReact Floating Action Button is the perfect solution. | ||
| - [Positioning](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning)—The KendoReact Floating Action Button provides several configuration options to assist with defining where the React component should be displayed within the application. The position can be set through easy-to-remember options like “start”, “center”, “end”, “top”, “middle” and “bottom”. | ||
| How to use a simple text FloatingActionButton component in your apps: | ||
| ```tsx | ||
| import { FloatingActionButton } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <FloatingActionButton text={'FloatingActionButtonLabel'} /> | ||
| ``` | ||
| ## React SplitButton Component | ||
| > This is a KendoReact **premium component** and requires a commercial license or an active trial license. | ||
| [The KendoReact SplitButton component](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list. | ||
| ### Key Features | ||
| Key features: | ||
| - **Icon SplitButton**—Each item within the KendoReact SplitButton can be rendered as just text, text along with an icon, or just as an icon. | ||
| - **Data Binding**—The React SplitButton can be defined declaratively and can also be bound to an array of strings, or an array of objects. | ||
| - [Icon SplitButton](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)—Each item within the KendoReact SplitButton can be rendered as just text, text along with an icon, or just as an icon. | ||
| - [Data Binding](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/data-binding)—The React SplitButton can be defined declaratively and can also be bound to an array of strings, or an array of objects. | ||
| How to use the SplitButtonComponent with hardcoded data: | ||
| ```tsx | ||
| import { SplitButton, SplitButtonItem } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| <SplitButton text="SplitButton Label"> | ||
| <SplitButtonItem text="Item 1 Label" /> | ||
| <SplitButtonItem text="Item 2 Label" /> | ||
| </SplitButton> | ||
| ``` | ||
| How to use the DropDownButton with simple data binding: | ||
| ```tsx | ||
| import { SplitButton } from '@progress/kendo-react-buttons'; | ||
| ... | ||
| /** | ||
| * Provide an array of items for the drop-down here. | ||
| */ | ||
| <SplitButton | ||
| items={items} | ||
| text="SplitButton Label" | ||
| /> | ||
| ``` | ||
| ## React Toolbar Component | ||
| > This is a **free React component**—no sign-up or license required, even in production. | ||
| [The React Toolbar component](https://www.telerik.com/kendo-react-ui/components/buttons/toolbar/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) provides an intuitive component akin to the minimal toolbars found within traditional desktop applications like Word and Excel. | ||
| ### Key Features | ||
| Key features: | ||
| - **Tools**—Within the KendoReact Toolbar, the Tools can be rendered as a Button, ButtonGroup, DropDownButton and SplitButtons. Of course, custom buttons can also be added. | ||
| - **Globalization**—The React Toolbar fully supports right-to-left (RTL) scenarios, ensuring that the component can be added in to any application, no matter what requirements for layout your applications have. | ||
| - [Tools](https://www.telerik.com/kendo-react-ui/components/buttons/toolbar/tools)—Within the KendoReact Toolbar, the Tools can be rendered as a Button, ButtonGroup, DropDownButton and SplitButtons. Of course, custom buttons can also be added. | ||
| - [Globalization](https://www.telerik.com/kendo-react-ui/components/buttons/globalization)—The React Toolbar fully supports right-to-left (RTL) scenarios, ensuring that the component can be added in to any application, no matter what requirements for layout your applications have. | ||
| ## React Buttons Components Library Features | ||
| How to add a simple Toolbar component in your apps: | ||
| Among the many features which the KendoReact Buttons deliver are: | ||
| ```tsx | ||
| import { Toolbar, Button, ButtonGroup } from '@progress/kendo-react-buttons'; // You need to install and import all KendoReact components that you want to render within your Toolbar. | ||
| ... | ||
| <Toolbar> | ||
| <ButtonGroup> | ||
| <Button>Item 1</Button> | ||
| <Button>Item 2</Button> | ||
| </ButtonGroup> | ||
| </Toolbar> | ||
| ``` | ||
| - **Disabled state**—To disable user interaction, just change a single property. | ||
| - **Custom rendering**—You can replace the content of the buttons with custom icons, text and elements. | ||
| - **Keyboard navigation**—You can interact with the buttons using only the keyboard. | ||
| - **Accessibility support**—The Buttons are compliant with WAI-ARIA and Section 508. | ||
| - [**Theme support**](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons)—The KendoReact Buttons, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines. | ||
| ## Support Options | ||
@@ -123,2 +270,3 @@ | ||
| - [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) | ||
| - [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free) | ||
| - [Getting Started with the KendoReact Buttons](https://www.telerik.com/kendo-react-ui/components/buttons/get-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) | ||
@@ -125,0 +273,0 @@ - [API Reference of the KendoReact Buttons](https://www.telerik.com/kendo-react-ui/components/buttons/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-buttons) |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
380311
1.56%- Number of lines in readme file
291
103.5%No dependency changes