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
.
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'));
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'));