React Bootstrap close button disabled state

React-Bootstrap Close Button Disabled state is a disabled button that is unclickable and unusable to prevent user interactions. It is a boolean attribute. We will learn more about it by creating a React app.

React-Bootstrap Used Attributes:

• disabled: This attribute is used to disable the button. It is a boolean value that makes the click false.

Syntax:

 <CloseButton disabled />

Example 1: In this example, we will see a Close Button Disabled. Write below code in App.js

Javascript

// App.js
import React from "react";
import CloseButton from "react-bootstrap/CloseButton";
import
"../node_modules/bootstrap/dist/css/bootstrap.min.css";

export default function App() {
    return (
        <div className="App">
            <h2
                style={{
                    color: "green",
                    textAlign: "center",
                }}
            >
                GeeksforGeeks
            </h2>
            <h2
                style={{
                    textAlign: "center",
                }}
            >
                React-Bootstrap Close
                Button Disabled state
            </h2>
            <CloseButton disabled />;
        </div>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: In this example, we will see how events will also get disabled when we disable button

Javascript

// App.js

import React from "react";
import CloseButton from "react-bootstrap/CloseButton";
import
"../node_modules/bootstrap/dist/css/bootstrap.min.css";

export default function App() {
    const callGFG = () => {
        alert("Hi GeeksforGeeks");
    };
    return (
        <div className="App">
            <h2
                style={{
                    color: "green",
                    textAlign: "center",
                }}>
                GeeksforGeeks
            </h2>
            <h2
                style={{
                    color: "green",
                    textAlign: "center",
                }}>
                React-Bootstrap Close
                Button Disabled state
            </h2>
            <div
                style={{
                    textAlign: "center",
                }}>
                Working Button:
                <CloseButton
                    onClick={callGFG}/>
            </div>
            <br />
            <div
                style={{
                    textAlign: "center",
                }}>
                Disabled Button:
                <CloseButton
                    onClick={callGFG}
                    disabled
                />
            </div>
        </div>
    );
}

Output: