Javatpoint Logo
Javatpoint Logo

React Bootstrap Buttons

Bootstrap provides several variants of the pre-styled buttons to use in our web application. These buttons can be used in forms, dialogs, and other places to ask the user for an action.

We can choose different buttons with support for different sizes, states, and more. The button can be used by defining a <Button></Button> component. It is imported as follows:

How to use React Bootstrap Buttons?

To use a button, define the <Button> component with the variant prop to apply a pre-defined button style from a range of buttons. The variant prop allows us to define the type of button. There are different types buttons available in Bootstrap. After defining the Button component, we have to import it from the react-bootstrap library. Let's understand it with an example:

App.js:

Output:

React Bootstrap Buttons

From the above output, we can see different types of buttons. We can use any of them by specifying the button variant as per our requirement.

Outlined Button

Bootstrap also supports lighter stylish outlined buttons without having background color. The outlined button's variant name starts with outlined-* ; for example, if we want to use the success button as outline, then its variant name will be outlined-success.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

These buttons provide lighter touch. On hovering the outlined buttons, the background color is filled according to the button variant.

Button Component with as prop

Generally the <Button> component renders the normal HTML <button> tag, but, when it is used with as or href prop it renders the respective element. For example, if we use button as follows:

Then it will render the following element:

Which means it will render the <a> tag instead of the <button> tag. However, it will keep the style of the button.

Similarly if we use the button with as="input" prop value. It will render an <input> element instead of the <button> element.

The above component will render the following HTML element:

But the look and feel of the above elements will be the same as the button.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

From the above output, we can see the rendered elements are looking as button; these are not the <button> element instead, it is rendered as the defined prop value.

Button Sizes

Bootstrap also supports large and small sizes buttons. The size prop is used to define the size of a button. The large buttons have a larger font size and padding value.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

Block Level Buttons

Bootstrap supports responsive full-width block buttons. We can mix the display and gap utilities to position them according to our requirements.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

Active Buttons

To make the button in the active state, pass the active prop to the button component.

App.js:

Output:

React Bootstrap Buttons

Disabled State Buttons

We can make the button by default inactive by passing the disabled prop to the button component.

App.js:

Output:

React Bootstrap Buttons

Note: By default, the <a> tag does not support a disabled attribute. While it is rendered on the browser, it is handled by the point-events. However, it is not supported by all the browsers.

Loading Buttons

The loading buttons are useful for displaying a loading… message while the output is being rendered on the browser. It is a good user experience practice to show the user loading message while the output is being rendered.

Generally, we use loaders to display the loading message, but in React, we can handle this by updating the state of the <Button> component.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

When we click on the above button, it will display the "data is loading" message as specified in our App.js file.

React Bootstrap Buttons

Checkbox / Radio Buttons

Buttons can also be used to customize the checkbox and radio button component. It will be useful for creating a toggle button that will work inside an element form component. However, we need to handle the checked state for checkbox and radio buttons manually.

The <ToggleButtonGroup> inside the <ButtonGroup> components works fine for checked state management. The <ButtonGroup> component works like a form component; it represents the value of an array of select values for a checkbox or radio group.

Consider the below example:

App.js:

Output:

React Bootstrap Buttons

Here the Checked button will render the following HTML element:

Similarly, the Radio button will render the following HTML element:

The above HTML elements will clear a picture of how the checkbox and radio buttons render elements on the browser.

Here, we have discussed different types of buttons in React Bootstrap. Now, we can use buttons for different purposes with different styles.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA