React-Bootstrap Close Button Variants

Last Updated : 24 Apr, 2025

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;

React-Bootstrap Close Button Variants

Similar Reads

Thank You!

What kind of Experience do you want to share?