diff --git a/src/CloseButton.js b/src/CloseButton.js
new file mode 100644
index 000000000..e9e22b6b7
--- /dev/null
+++ b/src/CloseButton.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules } from './utils';
+
+const propTypes = {
+ active: PropTypes.bool,
+ 'aria-label': PropTypes.string,
+ onClick: PropTypes.func,
+ variant: PropTypes.oneOf(['white', 'black'])
+}
+
+const defaultProps = {
+ variant: 'black',
+ 'aria-label': 'close'
+}
+
+const CloseButton = (props) => {
+ const {
+ className,
+ cssModule,
+ variant,
+ innerRef,
+ ...attributes
+ } = props;
+
+ const classes = mapToCssModules(classNames(
+ className,
+ 'btn-close',
+ variant && `btn-close-${variant}`
+ ))
+
+ return (
+
+ )
+}
+
+CloseButton.propTypes = propTypes;
+CloseButton.defaultProps = defaultProps;
+
+export default CloseButton;
diff --git a/src/__tests__/CloseButton.spec.js b/src/__tests__/CloseButton.spec.js
new file mode 100644
index 000000000..0647a58d6
--- /dev/null
+++ b/src/__tests__/CloseButton.spec.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import CloseButton from '../CloseButton';
+
+describe('CloseButton', () => {
+ it('should render a close button', () => {
+ const wrapper = shallow();
+ expect(wrapper.hasClass('btn-close')).toBe(true);
+ })
+
+ it('should render white variant', () => {
+ const wrapper = shallow();
+ expect(wrapper.hasClass('btn-close-white')).toBe(true);
+ })
+
+
+ describe('onClick', () => {
+ it('calls props.onClick if it exists', () => {
+ const onClick = jest.fn();
+ const wrapper = mount();
+
+ wrapper.find('button').hostNodes().simulate('click');
+ expect(onClick).toHaveBeenCalled();
+ });
+
+ it('returns the value returned by props.onClick', () => {
+ const onClick = jest.fn(() => 1234);
+ const wrapper = mount();
+
+ const result = wrapper.find('button').props().onClick();
+ expect(onClick).toHaveBeenCalled();
+ expect(result).toEqual(1234);
+ });
+
+ it('is not called when disabled', () => {
+ const onClick = jest.fn();
+ const wrapper = mount();
+
+ wrapper.find('button').hostNodes().simulate('click');
+ expect(onClick).not.toHaveBeenCalled();
+ });
+ });
+})
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b61058c2b..f964e49ee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,7 @@ export ButtonToggle from './ButtonToggle';
export ButtonDropdown from './ButtonDropdown';
export ButtonGroup from './ButtonGroup';
export ButtonToolbar from './ButtonToolbar';
+export CloseButton from './CloseButton';
export Dropdown from './Dropdown';
export DropdownItem from './DropdownItem';
export DropdownMenu from './DropdownMenu';
diff --git a/stories/CloseButton.stories.js b/stories/CloseButton.stories.js
new file mode 100644
index 000000000..23bd86402
--- /dev/null
+++ b/stories/CloseButton.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default {
+ title: 'Components/CloseButton',
+ parameters: {
+ docs: {
+ description: {
+ component: `
+ [Bootstrap CloseButton](https://getbootstrap.com/docs/5.2/components/close-button/)
+
+ A generic close button for dismissing content like modals and alerts.
+ `,
+ }
+ }
+ }
+};
+
+export { default as CloseButton } from './examples/CloseButton';
+export { default as CloseButtonWhite } from './examples/CloseButtonWhite';
+export { default as Props } from './examples/CloseButtonProps';
\ No newline at end of file
diff --git a/stories/examples/CloseButton.js b/stories/examples/CloseButton.js
new file mode 100644
index 000000000..f9e65ad0b
--- /dev/null
+++ b/stories/examples/CloseButton.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { CloseButton } from 'reactstrap';
+
+const Example = (args) => {
+ return (
+
+ )
+}
+
+Example.args= {
+ disabled: false,
+}
+
+export default Example;
\ No newline at end of file
diff --git a/stories/examples/CloseButtonProps.js b/stories/examples/CloseButtonProps.js
new file mode 100644
index 000000000..1dc0eff9a
--- /dev/null
+++ b/stories/examples/CloseButtonProps.js
@@ -0,0 +1,10 @@
+
+import React from 'react';
+import { CloseButton } from 'reactstrap';
+import Props from './Props';
+
+const Example = () => (
+
+);
+
+export default Example;
diff --git a/stories/examples/CloseButtonWhite.js b/stories/examples/CloseButtonWhite.js
new file mode 100644
index 000000000..378d37484
--- /dev/null
+++ b/stories/examples/CloseButtonWhite.js
@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { CloseButton } from 'reactstrap';
+
+const Example = (args) => {
+ return (
+
+
+
+ )
+}
+
+Example.args= {
+ disabled: false,
+ variant: 'white'
+}
+
+export default Example;
\ No newline at end of file