Close Button

    A generic close button for dismissing content such as modals and alerts.

    Example

    Disabled state

    Bootstrap adds relevant styling to a disabled close button to prevent user interactions.

    Variants

    Change the default dark color to white using variant="white".

    Accessibility

    To ensure the maximum accessibility for Close Button components, it is recommended that you provide relevant text for screen readers. The example below provides an example of accessible usage of this component by way of the aria-label property.

    API

    import CloseButton from 'react-bootstrap/CloseButton'Copy import code for the CloseButton component
    NameTypeDefaultDescription
    aria-label
    string
    'Close'
    onClick
    function
    variant
    'white'

    Render different color variant for the button.

    Omitting this will render the default dark color.