React-Bootstrap Close Button Variants

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:

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: