Important
- This package is а part of KendoReactâan enterprise-grade UI library with 120+ free and premium components.
- It contains both free and premium KendoReact components and tools. To use the premium components, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either purchase a license or start a free trial. You can use the free components without having to sign up or get a license key.
- If you're looking for free React components, check out Get Started with KendoReact Free.
- If you have an active license, visit the KendoReact My License page to learn how to configure your KendoReact licensing.
- Installing and working with this package indicates that you accept the KendoReact License Agreement.
- The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
Start using KendoReact and speed up your development process!
The React Buttons package, part of KendoReact, includes a rich selection of fully configurable button types that help you create stylish and practical applications.
How to start:
npm i @progress/kendo-react-buttons
What's in this package:
Additional information:
React Buttons Components Library FeaturesHere are some of the features shared across all components included in the package (this is not an exhaustive list):
This is a free React componentâno sign-up or license required.
The React Button 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:
How to use the Button component in your apps:
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.
The KendoReact ButtonGroup 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:
import { Button, ButtonGroup } from '@progress/kendo-react-buttons';
...
<ButtonGroup>
/**
* Insert the <Button> components that you want to display as a group here.
*/
</ButtonGroup>
This is a free React componentâno sign-up or license required.
The React Chip component 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:
size, fillMode, rounded, and themeColor properties to let you control its look and feel.How to use the Chip component in your apps:
import { Chip } from '@progress/kendo-react-buttons';
...
<Chip
text={'Chip Label'}
/>
This is a free React componentâno sign-up or license required.
The React ChipList component takes the React Chip and provides additional functionality related to managing a collection of KendoReact Chip components.
Key features:
How to use the ChipList component in your apps:
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 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:
How to use the DropDownButton with hardcoded data:
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:
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.
The KendoReact Floating Action Button 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:
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.How to use a simple text FloatingActionButton component in your apps:
import { FloatingActionButton } from '@progress/kendo-react-buttons';
...
<FloatingActionButton text={'FloatingActionButtonLabel'} /> React SpeechToTextButton Component
This is a KendoReact premium component and requires a commercial license or an active trial license.
The KendoReact SpeechToTextButton component is a component for converting spoken input into text using speech recognition.
Key features:
How to use a simple text SpeechToTextButton component in your apps:
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
...
<SpeechToTextButton>
Button label
</SpeechToTextButton> React SplitButton Component
This is a KendoReact premium component and requires a commercial license or an active trial license.
The KendoReact SplitButton component 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:
How to use the SplitButtonComponent with hardcoded data:
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 SplitButtonComponent with simple data binding:
import { SplitButton } from '@progress/kendo-react-buttons';
...
/**
* Provide an array of items for the drop-down here.
*/
<SplitButton
items={items}
text="SplitButton Label"
/>
This is a free React componentâno sign-up or license required.
The React Toolbar component provides an intuitive component akin to the minimal toolbars found within traditional desktop applications like Word and Excel.
Key features:
How to add a simple Toolbar component in your apps:
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> Using for Free vs Commercial License
The following table outlines the key resources available with KendoReact and KendoReact Free.
KendoReact Free KendoReact React components 50+ 120+ Four professional themes Four Figma UI Kits Page Templates & Building Blocks 1 template ThemeBuilder Free* Ultimate Source code No Visual Studio Code extension 1 starter template Full functionality Legendary customer support No AI coding assistant NoFor any issues you might encounter while working with the KendoReact Buttons, use any of the available support channels:
High-level component overview pages
Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4