• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact Button Overview

The KendoReact Button provides a clickable UI functionality, and you can configure it to perform any action or trigger an event.

To make the Button even more user-friendly and intuitive to use, you can display textual content, predefined icons, images, custom icons, or render a combination of textual and image content within the Button.

The KendoReact Button is distributed through the kendo-react-buttons NPM package.


The following example demonstrates the Button component in action.

Example
View Source
Change Theme:

The Button is part of the KendoReact Buttons component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Button and the rest of the components in the package, see the Getting Started with the KendoReact Buttons guide.

Key Features

  • Disabled Button—You can easily render a disabled button and prevent end-users from interacting with it.
  • Icon Button—You can add an image, predefined or custom icons to the button.
  • Toggleable Button—The togglable property makes it easy to indicate if a Button is active or not.
  • Appearance—You can quickly style the Button by choosing from the predefined styling options.
  • Globalization—The built-in globalization support allows you to create apps that are ready to be implemented worldwide.

To learn more about the appearance, anatomy, and accessibility of the Button, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

In this article

Not finding the help you need?