React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Disable in React ButtonGroup component

24 May 2022 / 1 minute to read

Particular button

To disable a particular button in a ButtonGroup, disabled attribute should be added to corresponding button element.

Whole ButtonGroup

To disable whole ButtonGroup, disabled attribute should be added to all the button elements.

The following example illustrates how to disable the particular and the whole ButtonGroup.

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To disable single button/whole ButtonGroup.
class App extends React.Component {
    render() {
        return (<div>
          <div className='e-btn-group'>
            <ButtonComponent>HTML</ButtonComponent>
            <ButtonComponent disabled={true}>CSS</ButtonComponent>
            <ButtonComponent>Javascript</ButtonComponent>
          </div>
          <div className='e-btn-group'>
            <ButtonComponent disabled={true}>HTML</ButtonComponent>
            <ButtonComponent disabled={true}>CSS</ButtonComponent>
            <ButtonComponent disabled={true}>Javascript</ButtonComponent>
          </div>
        </div>);
    }
}
ReactDom.render(<App />, document.getElementById('buttongroup'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='buttongroup'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To disable single button/whole ButtonGroup.
class App extends React.Component<{}, {}> {
  public render() {
      return (
        <div>
          <div className='e-btn-group'>
            <ButtonComponent>HTML</ButtonComponent>
            <ButtonComponent disabled = {true}>CSS</ButtonComponent>
            <ButtonComponent>Javascript</ButtonComponent>
          </div>
          <div className='e-btn-group'>
            <ButtonComponent disabled = {true}>HTML</ButtonComponent>
            <ButtonComponent disabled = {true}>CSS</ButtonComponent>
            <ButtonComponent disabled = {true}>Javascript</ButtonComponent>
          </div>
        </div>
      );
  }
}
ReactDom.render(<App />,document.getElementById('buttongroup'));

To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to the particular input element.

Previous
Next