React Bootstrap Close Button Component
A React Bootstrap Close Button Component is a generic close button for dismissing content such as modals and alerts. You can use it to provide an option to close or hide a component with a simple click. You can customize its appearance and behavior with props such as variant, aria-label, onClick, and disabled.
Attributes:
- aria-label: A string that provides an accessible label indicating the relevant information about the Close Button. The default value is ‘Close’.
- onClick: A function that is fired after the Close Button is clicked. The function receives the event object as an argument.
- variant: A string that specifies the color variant for the button. The only valid value is ‘white’, which renders a white button instead of the default dark one. This attribute is useful when the button is placed on a dark background.
- disabled: Bootstrap adds relevant styling to a disabled close button to prevent user interactions.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the required modules using the following command.
npm install react-bootstrap bootstrap
Step 4: Add the below line in the index.jsx or App.jsx file.
import 'bootstrap/dist/css/bootstrap.min.css';
Approach:
- First, install the react-bootstrap using the command mentioned above.
- After installing, Import ‘CloseButton’ from ‘react-bootstrap/CloseButton’ in that file.
- Now in the file App.jsx write the code following the below instructions.
Example: Below is the practical implementation of the bootstrap close button component:
Javascript
import 'bootstrap/dist/css/bootstrap.min.css' ; import "./App.css" ; import CloseButton from 'react-bootstrap/CloseButton' ; function App() { return ( <div> <CloseButton aria-label= "Hide" onClick={ () => alert( 'Click Successful!' ) } /> <CloseButton variant= "white" aria-label= "Close" /> <CloseButton disabled /> </div> ); } export default App; |
CSS
/* App.css */ #root { max-width : 1280px ; margin : 0 auto ; padding : 2 rem; text-align : center ; } |
Step to Run Application:
npm start
Output: Go to http://localhost:3000/, and you will see the following output.
Contact Us