Skip to main content

ButtonGroup

Basic example​

Group a series of buttons together on a single line with the ButtonGroup.

Result
Loading...
Live Editor
<ButtonGroup aria-label="Basic example">
	<Button variant="primary">Left</Button>
	<Button variant="outline-secondary">Middle</Button>
	<Button variant="outline-secondary">Right</Button>
</ButtonGroup>

Mixed variants​

Combine different button variants within a group.

Result
Loading...
Live Editor
<ButtonGroup aria-label="Mixed variants">
	<Button variant="primary">Primary</Button>
	<Button variant="outline-secondary">Secondary</Button>
	<Button variant="outline-success">Success</Button>
	<Button variant="outline-danger">Danger</Button>
</ButtonGroup>

Outline variants​

Result
Loading...
Live Editor
<ButtonGroup aria-label="Outline example">
	<Button variant="outline-primary">Left</Button>
	<Button variant="outline-primary">Middle</Button>
	<Button variant="outline-primary">Right</Button>
</ButtonGroup>

Sizing​

Result
Loading...
Live Editor
<div className="d-flex flex-column gap-3">
	<ButtonGroup aria-label="Large button group">
		<Button size="xxl" variant="outline-secondary">
			Left
		</Button>
		<Button size="xxl" variant="outline-secondary">
			Middle
		</Button>
		<Button size="xxl" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>

	<ButtonGroup aria-label="Large button group">
		<Button size="xl" variant="outline-secondary">
			Left
		</Button>
		<Button size="xl" variant="outline-secondary">
			Middle
		</Button>
		<Button size="xl" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>

	<ButtonGroup aria-label="Large button group">
		<Button size="lg" variant="outline-secondary">
			Left
		</Button>
		<Button size="lg" variant="outline-secondary">
			Middle
		</Button>
		<Button size="lg" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>

	<ButtonGroup aria-label="Default button group">
		<Button size="md" variant="outline-secondary">
			Left
		</Button>
		<Button size="md" variant="outline-secondary">
			Middle
		</Button>
		<Button size="md" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>

	<ButtonGroup aria-label="Small button group">
		<Button size="sm" variant="outline-secondary">
			Left
		</Button>
		<Button size="sm" variant="outline-secondary">
			Middle
		</Button>
		<Button size="sm" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>

	<ButtonGroup aria-label="Small button group">
		<Button size="xs" variant="outline-secondary">
			Left
		</Button>
		<Button size="xs" variant="outline-secondary">
			Middle
		</Button>
		<Button size="xs" variant="outline-secondary">
			Right
		</Button>
	</ButtonGroup>
</div>

Vertical​

Make a group of buttons appear vertically stacked using the vertical prop.

Result
Loading...
Live Editor
<ButtonGroup vertical aria-label="Vertical button group">
	<Button variant="primary">Button</Button>
	<Button variant="primary">Button</Button>
	<Button variant="primary">Button</Button>
</ButtonGroup>

Active state​

Set a button as active to indicate the current selection.

Result
Loading...
Live Editor
function ActiveButtonGroupExample() {
	const [active, setActive] = useState('middle');

	return (
		<ButtonGroup aria-label="Active state example">
			<Button
				variant={active === 'left' ? 'primary' : 'outline-primary'}
				active={active === 'left'}
				onClick={() => setActive('left')}
			>
				Left
			</Button>
			<Button
				variant={active === 'middle' ? 'primary' : 'outline-primary'}
				active={active === 'middle'}
				onClick={() => setActive('middle')}
			>
				Middle
			</Button>
			<Button
				variant={active === 'right' ? 'primary' : 'outline-primary'}
				active={active === 'right'}
				onClick={() => setActive('right')}
			>
				Right
			</Button>
		</ButtonGroup>
	);
}

render(<ActiveButtonGroupExample />);

With icons​

Result
Loading...
Live Editor
<ButtonGroup aria-label="Icon button group">
	<Button variant="outline-secondary" renderPrefix={() => <span className="icon-align-left" />}>
		Left
	</Button>
	<Button variant="outline-secondary" renderPrefix={() => <span className="icon-align-center" />}>
		Center
	</Button>
	<Button variant="outline-secondary" renderPrefix={() => <span className="icon-align-right" />}>
		Right
	</Button>
</ButtonGroup>

Nested dropdown​

Result
Loading...
Live Editor
<ButtonGroup aria-label="Button group with dropdown">
	<Button variant="primary">Action</Button>
	<Button variant="primary">Another action</Button>
	<DropdownButton as={ButtonGroup} title="Dropdown" variant="primary" id="bg-nested-dropdown">
		<Dropdown.Item eventKey="1">Option 1</Dropdown.Item>
		<Dropdown.Item eventKey="2">Option 2</Dropdown.Item>
		<Dropdown.Item eventKey="3">Option 3</Dropdown.Item>
	</DropdownButton>
</ButtonGroup>