React Bootstrap Close Button Component

Close Button with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.

On this page

Using the React Bootstrap Close Button component

The React Bootstrap Close Button component provides a simple and accessible way to dismiss modals, alerts, or other interface elements. It’s fully customizable and built with Bootstrap-compatible styles.

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonExample = () => {
  return <CCloseButton />
}

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonExample = () => {
  return <CCloseButton />
}

Disabled state

React Bootstrap Close Button can be disabled using the disabled prop. This changes its opacity and applies pointer-events: none and user-select: none to prevent interactions.

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDisabledExample = () => {
  return <CCloseButton disabled />
}

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDisabledExample = () => {
  return <CCloseButton disabled />
}

Dark variant

Use the dark prop to apply a dark version of the close button. This inverts the icon using the filter CSS property for better visibility on dark backgrounds.

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDarkExample = () => {
  return (
    <>
      <CCloseButton dark />
      <CCloseButton dark disabled />
    </>
  )
}

import React from 'react'
import { CCloseButton } from '@coreui/react'

export const CloseButtonDarkExample = () => {
  return (
    <>
      <CCloseButton dark />
      <CCloseButton dark disabled />
    </>
  )
}

API reference

Check the API documentation below for the full list of props available in the React Bootstrap Close Button component:

<CCloseButton />