Search results

Change Size

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.

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

enableRipple(true);

// To render Switch.
class App extends React.Component<{}, {}> {
  render() {
    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>
    );
  }
}
ReactDom.render(<App />, document.getElementById('switch'));