Open In App

React-Bootstrap Close Button Variants

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

React-Bootstrap Close Button Variants can defined as the CloseButton component that provides the flexibility to create a close button with a range of variants, enabling you to style the button according to your specific design requirements. Bootstrap's button variants, offer you the means to harmonize the appearance of the close button with the overall aesthetic of your application.

variant property values:

  • white: The close button will be in white color
  • dark: The close button will be in dark color

Syntax:

<CloseButton variant = "value" />

Example 1: This example creates the close button with dark and white color buttons using variant property.

JavaScript 
import { CloseButton }
    from 'react-bootstrap';

const App = () => {

    return (

        <div className="App">
            <h1 style={
                { color: 'green', textAlign: 'center' }
            }> GeeksforGeeks
            </h1>
            <h5 style={
                { textAlign: 'center' }
            }>React-Bootstrap Close Button Variants
            </h5>
            <br></br>
            <div style={{ textAlign: 'center' }}>
                <CloseButton variant="dark" />
                <div style={{ backgroundColor: 'black' }}>
                    <CloseButton variant="white" />
                </div>
            </div>
        </div>
    );
};

export default App;

Output:

20231006-162504

Example 2: This example creates the close button of white variant for welcome popup on website.

JavaScript 
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import { CloseButton, Container }
    from 'react-bootstrap';

const App = () => {
    const [
        showWelcomeBox,
        setShowWelcomeBoxVisible
    ] = useState(true);

    const handleClose = () => {
        setShowWelcomeBoxVisible(false);
    };

    return (
        <Container className="App text-center">
            <div className='mt-0'>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h5>
                    React-Bootstrap Close Button Variants
                </h5>
            </div>
            <div>
                {showWelcomeBox && (
                    <div className="mx-auto d-flex justify-content-center 
                                    align-items-center fixed-top bg-success"
                        style={{ marginTop: "100px" }}>
                        <CloseButton variant="white" onClick={handleClose} />
                        <p className="text-white">
                            Hi Geeks ! Welcome to GeeksforGeeks
                        </p>
                    </div>
                )}
            </div>
        </Container>
    );
};

export default App;

Output:

20231405-001450



U
unstoppablepandu
Improve
Article Tags :

Explore

Lightbox