How to set orientation in React Button Group

4 Sep 20262 minutes to read

Arrange React Button Group buttons in vertical or horizontal orientation. By default, React Button Group displays buttons horizontally.

Vertical orientation

Display buttons vertically by applying the e-vertical CSS class to the React Button Group target element. Vertical orientation is useful for sidebar navigation and stacked button layouts.

The following example demonstrates how to create a React Button Group with vertical orientation:

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render ButtonGroup with vertical orientation.
function App() {
    return (<div>
      <div className='e-btn-group e-vertical'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('buttongroup'));

app.tsx

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

// To render ButtonGroup with vertical orientation.
function App() {
  return (
    <div>
      <div className='e-btn-group e-vertical'>
        <ButtonComponent>HTML</ButtonComponent>
        <ButtonComponent>CSS</ButtonComponent>
        <ButtonComponent>Javascript</ButtonComponent>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('buttongroup'));

React Button Group does not support SplitButton component nesting in a vertical orientation.