React Button Component - Smart and Custom Button Styles

Overview

The React Button is a custom HTML5 button component. It has several built-in features such as support for icons, predefined styles, different button types, different button sizes, and UI customization. Toggle and repeat button functionality can be achieved by handling a click event.

Disable button

The React disabled button is used to indicate the inactive state of a button. It can be enabled or disabled by using the disabled property.

• Disabled button documentation

Button size

You can choose from different button sizes, default and small, as required in your application.

• React Button size documentation

• React Block button documentation

UI customization

You can choose from built-in button types such as outline, block, and round buttons. Also, you can customize the React Button’s appearance.

Built-in themes

The React Button component supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Other supported frameworks

Button component is also available in Blazor, Vue, Angular, and JavaScript frameworks. Check out the different Button platforms from the links below,

• Blazor Button
• Vue Button
• Angular Button
• JavaScript Button

Web accessibility

• Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, we designed the UI element visuals such as foreground color, background color, line spacing, text, and images.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

React Button Code Example

Easily get started with the React Button using a few simple lines of TSX code example as demonstrated below. Also explore our React Button Example that shows you how to render and configure a Button in React.

// Import the Button.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';
// To render Button.
export default class App extends React.Component {
    render() {
        return (<ButtonComponent>Button</ButtonComponent>);
    }
}