diff --git a/src/Button.js b/src/Button.js
index 8d24b37b1..e8d216f02 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
+import CloseButton from './CloseButton';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -54,13 +55,20 @@ function Button(props) {
     ...attributes
   } = props;
 
+  if (close) {
+    return (
+      <CloseButton
+        {...attributes}
+      />
+    )
+  }
+
   const btnOutlineColor = `btn${outline ? '-outline' : ''}-${color}`;
 
   const classes = mapToCssModules(classNames(
     className,
-    close && 'btn-close',
-    close || 'btn',
-    close || btnOutlineColor,
+    'btn',
+    btnOutlineColor,
     size ? `btn-${size}` : false,
     block ? 'd-block w-100' : false,
     { active, disabled: props.disabled }
@@ -70,8 +78,6 @@ function Button(props) {
     Tag = 'a';
   }
 
-  const defaultAriaLabel = close ? 'Close' : null;
-
   return (
     <Tag
       type={(Tag === 'button' && attributes.onClick) ? 'button' : undefined}
@@ -79,7 +85,7 @@ function Button(props) {
       className={classes}
       ref={innerRef}
       onClick={onClick}
-      aria-label={ariaLabel || defaultAriaLabel}
+      aria-label={ariaLabel}
     />
   );
 }
diff --git a/src/CloseButton.js b/src/CloseButton.js
new file mode 100644
index 000000000..2eae50c30
--- /dev/null
+++ b/src/CloseButton.js
@@ -0,0 +1,44 @@
+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'])
+}
+
+const defaultProps = {
+  '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 (
+    <button
+      ref={innerRef}
+      type="button"
+      className={classes}
+      {...attributes} />
+  )
+}
+
+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(<CloseButton />);
+    expect(wrapper.hasClass('btn-close')).toBe(true);
+  })
+
+  it('should render white variant', () => {
+    const wrapper = shallow(<CloseButton variant='white'/>);
+    expect(wrapper.hasClass('btn-close-white')).toBe(true);
+  })
+
+
+  describe('onClick', () => {
+    it('calls props.onClick if it exists', () => {
+      const onClick = jest.fn();
+      const wrapper = mount(<CloseButton onClick={onClick} />);
+
+      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(<CloseButton onClick={onClick} />);
+
+      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(<CloseButton onClick={onClick} disabled />);
+
+      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..2543a8e20
--- /dev/null
+++ b/stories/CloseButton.stories.js
@@ -0,0 +1,21 @@
+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 CloseButtonDisabled } from './examples/CloseButtonDisabled';
+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 (
+    <CloseButton {...args}/>
+  )
+}
+
+Example.args= {
+  disabled: false,
+}
+
+export default Example;
\ No newline at end of file
diff --git a/stories/examples/CloseButtonDisabled.js b/stories/examples/CloseButtonDisabled.js
new file mode 100644
index 000000000..aff4c66c7
--- /dev/null
+++ b/stories/examples/CloseButtonDisabled.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { CloseButton } from 'reactstrap';
+
+const Example = (args) => {
+  return (
+    <CloseButton disabled />
+  )
+}
+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 = () => (
+  <Props components={[CloseButton]} />
+);
+
+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 (
+    <div className='bg-dark p-3'>
+      <CloseButton {...args}/>
+    </div>
+  )
+}
+
+Example.args= {
+  disabled: false,
+  variant: 'white'
+}
+
+export default Example;
\ No newline at end of file
diff --git a/types/lib/CloseButton.d.ts b/types/lib/CloseButton.d.ts
new file mode 100644
index 000000000..298f3da6f
--- /dev/null
+++ b/types/lib/CloseButton.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CloseButtonProps 
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  variant?: 'white' | 'black';
+  cssModule?: CSSModule;
+}
+
+declare class CloseButton extends React.Component<CloseButtonProps> {}
+export default CloseButton;
\ No newline at end of file