React.js Blueprint Button group Component Usage with popovers
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we'll discuss React.js Blueprint Button group Component Usage with popovers. A button group is used to arrange multiple buttons in a horizontal or vertical group. The popovers enables button group to make all buttons expand equally to fill the available space.
Syntax:
<Popover content={ } renderTarget={ <ButtonGroup> <Button>...</Button> <Button>...</Button> </ButtonGroup> } />
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:

Step 4: Run the project as follows:
npm start
Example 1: The below example demonstrates the basic usage of the Button Group with the Popover component.
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, ButtonGroup } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<div>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>
ReactJs BluePrint Button group Component
Usage with popovers
</h2>
</div>
<div style={{ textAlign: "center" }}>
<Popover2
interactionKind="click"
position="bottom"
content={
<div style={{ backgroundColor: 'lightgreen',
padding: 20 }}>
<p>GeeksforGeeks</p>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<ButtonGroup>
<Button
{...targetProps}
elementRef={ref}
text="Click"
icon="add"
/>
<Button
{...targetProps}
elementRef={ref}
text="Download"
icon="download"
/>
</ButtonGroup>
)}
/>
</div>
</div>
);
}
export default App;
Output:

Example 2: The below example demonstrates the basic usage of the Button Group with the Popover with the help of fill and vertical props of the component.
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, ButtonGroup } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<div>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>
ReactJs BluePrint Button group Component
Usage with popovers
</h2>
</div>
<div style={{ textAlign: "center" }}>
<Popover2
interactionKind="click"
position="bottom"
content={
<div style={{ backgroundColor: 'lightgreen',
padding: 20 }}>
<p>GeeksforGeeks</p>
</div>
}
renderTarget={({ isOpen, ref,
...targetProps }) => (
<ButtonGroup vertical fill>
<Button
{...targetProps}
elementRef={ref}
text="Click"
icon="add"
/>
<Button
{...targetProps}
elementRef={ref}
text="Download"
icon="download"
/>
</ButtonGroup>
)}
/>
</div>
</div>
);
}
export default App;
Output:
