Disable in React Button group component

7 Aug 20233 minutes 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.

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To disable single button/whole ButtonGroup.
function App() {
    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>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To disable single button/whole ButtonGroup.
function App() {
  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>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

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