Enable rtl in React Button group component
30 Jan 20231 minute to read
ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl
class to the target element.
The following example illustrates how to create ButtonGroup with RTL support.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with RTL.
function App() {
return (<div>
<div className='e-btn-group e-rtl'>
<ButtonComponent>HTML</ButtonComponent>
<ButtonComponent>CSS</ButtonComponent>
<ButtonComponent>Javascript</ButtonComponent>
</div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with RTL.
function App() {
return (
<div>
<div className='e-btn-group e-rtl'>
<ButtonComponent>HTML</ButtonComponent>
<ButtonComponent>CSS</ButtonComponent>
<ButtonComponent>Javascript</ButtonComponent>
</div>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));