Change size in React Switch component

7 Aug 20233 minutes to read

The different Switch sizes available are default and small. To reduce the size of default Switch to small, set the cssClass property to e-small.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch.
function App() {
    return (<table className='size'>
          <tr>
              <td className='lSize'>Small</td>
              <td>
                  <SwitchComponent cssClass="e-small"/>
              </td>
          </tr>
          <tr>
              <td className='lSize'>Default</td>
              <td>
                  <SwitchComponent />
              </td>
          </tr>
      </table>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

app.tsx

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

enableRipple(true);

// To render Switch.
function App() {
  return (
        <table className='size'>
          <tr>
              <td className='lSize'>Small</td>
              <td>
                  <SwitchComponent cssClass="e-small" />
              </td>
          </tr>
          <tr>
              <td className='lSize'>Default</td>
              <td>
                  <SwitchComponent />
              </td>
          </tr>
      </table>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));