React.js Blueprint Button group Component Vertical layout

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

The React.js Blueprint ButtonGroup Component allows to arrange multiple buttons in a group which provides a better user experience.

Syntax:

<ButtonGroup vertical></ButtonGroup>

Prerequisite:

• Introduction and Installation reactJS
• ReactJs Blueprint ButtonGroup Component
• ReactJs Blueprint Button Component
• React Hook useState

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this.

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Example 1: We are importing the ButtonGroup and Button from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. We are adding three Button Components within the ButtonGroup Component and to it we are passing the vertical prop.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import {
    Button, ButtonGroup
} from "@blueprintjs/core";

function App() {
    return (
        <div
            style={{
                margin: 40,
            }}>
            <h4>
                ReactJS Blueprint Button group
                Component Vertical layout
            </h4>
            <ButtonGroup vertical>
                <Button>Home</Button>
                <Button>Courses</Button>
                <Button>Articles</Button>
            </ButtonGroup>
        </div>
    );
}

export default App;

Output:

Example 2: To the above code, we have added a few more Button Components and have passed icons, we are further adding a button with a label as the state-defined selectBool created using react hook useState, initialized as false, and added an onClick function that will call the onHandleChange function that will change the current state of the selectBool.

App.js

import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import {
    Button, ButtonGroup
} from "@blueprintjs/core";

function App() {
    const [
        selectBool, setSelectBool
    ] = useState(false);
    const onHandleChange = () => {
        setSelectBool(!selectBool);
    };
    return (
        <div
            style={{
                margin: 40,
            }}>
            <h4>
                ReactJS Blueprint Button group
                Component Vertical layout
            </h4>
            <p
                style={{
                    marginTop: 10,
                    marginBottom: 10,
                }}>
                <b
                    style={{
                        marginLeft: 30,
                    }}>
                    vertical ?
                </b>
                <button
                    onClick={onHandleChange}
                    style={{
                        marginLeft: 10,
                        fontSize: 15,
                        padding: 10,
                        textTransform: "capitalize",
                    }}>
                    {"" + selectBool}
                </button>
            </p>


            <ButtonGroup vertical={selectBool}>
                <Button icon="user">
                    User
                </Button>

                <Button icon="applications">
                    Courses
                </Button>

                <Button icon="chat">
                    Discussion
                </Button>

                <Button icon="vertical-bar-chart-asc">
                    Leaderboard
                </Button>

                <Button icon="edit">
                    Edit
                </Button>

                <Button icon="log-out">
                    Logout
                </Button>
            </ButtonGroup>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/components/button-group.vertical-layout