Disable in React Button group component

2 Mar 20263 minutes to read

Disable buttons in a ButtonGroup to prevent user interaction. You can disable individual buttons or the entire ButtonGroup.

Disable a particular button

Add the disabled attribute to a specific button element to disable only that button within the ButtonGroup.

Disable the entire ButtonGroup

Add the disabled attribute to all button elements to disable the entire ButtonGroup.

The following example demonstrates how to disable individual buttons and the entire 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.