Change size in React Switch component

30 Jan 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'));