Close Button

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

Example

结果

Loading...

实时编辑器

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.

结果

Loading...

实时编辑器

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".

Heads up!

Dark variants for components were deprecated in Bootstrap v5.3.0 with the introduction of color modes. Instead of adding variant="white", set data-bs-theme="dark" on the root element, a parent wrapper, or the component itself.

结果

Loading...

实时编辑器

import CloseButton from 'react-bootstrap/CloseButton'; function VariantsExample() { return ( <div data-bs-theme="dark" className='bg-dark p-2'> <CloseButton /> <CloseButton disabled /> </div> ); } export default VariantsExample;

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div data-bs-theme="dark" className='bg-dark p-2'>
      <CloseButton />
      <CloseButton 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.

结果

Loading...

实时编辑器

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

CloseButton