Close Button

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

Example

import CloseButton from 'react-bootstrap/CloseButton';

function BasicExample() {
  return <CloseButton />;
}

export default BasicExample;

import CloseButton from 'react-bootstrap/CloseButton';

function BasicExample() {
  return <CloseButton />;
}

export default BasicExample;

Disabled state

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

import CloseButton from 'react-bootstrap/CloseButton';

function DisabledExample() {
  return <CloseButton disabled />;
}

export default DisabledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function DisabledExample() {
  return <CloseButton disabled />;
}

export default DisabledExample;

Variants

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

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div className="bg-dark p-3">
      <CloseButton variant="white" />
      <CloseButton variant="white" disabled />
    </div>
  );
}

export default VariantsExample;

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div className="bg-dark p-3">
      <CloseButton variant="white" />
      <CloseButton variant="white" disabled />
    </div>
  );
}

export default VariantsExample;

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.

import CloseButton from 'react-bootstrap/CloseButton';

function LabelledExample() {
  return <CloseButton aria-label="Hide" />;
}

export default LabelledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function LabelledExample() {
  return <CloseButton aria-label="Hide" />;
}

export default LabelledExample;

API

CloseButtonview source file

import CloseButton from 'react-bootstrap/CloseButton'

Name	Type	Default	Description
aria-label	string	`'Close'`	An accessible label indicating the relevant information about the Close Button.
onClick	function		A callback fired after the Close Button is clicked.
variant	`'white'`		Render different color variant for the button. Omitting this will render the default dark color.

Close Button

Example#

Disabled state#

Variants#

Accessibility#

API#

CloseButton#view source file

Example

Disabled state

Variants

Accessibility

API

CloseButtonview source file