ReactJS Buttons

React has the ability to take action in response to user events, just as HTML DOM events. The same HTML events—click, change, mouseover, etc.—are available in React. With the aid of multiple states, sizes, and other features, you may change button styles and actions in forms, dialogues, and more. The button styles in React are diverse. Any button style can be used by users to rapidly construct a themed button; only the variation prop must be changed. In this article, we will demonstrate how to render different types and properties of Buttons using ReactJS.

How to create a button in Reach JS

For your project to use the React Bootstrap button, install the following package.
Npm install bootstrap@5.1.3 react-bootstrap

You can simply import the particular components in the manner shown below:

import Button from 'react-bootstrap/Button'

Alternatively,

import { Button } from 'react-bootstrap';

You can add CSS in the manner shown below:

import 'bootstrap/dist/css/bootstrap.min.css';

Let's examine some code for the different button style types:

   <>

  {' '}

  {' '}

  {' '}

  {' '}

{' '}

   

{' '}



</>

Outline Button

The buttons that have a softer touch and no backdrop color are called outline buttons. Even before button type in the variation property for such kinds of buttons, we add an additional "outline-".

 Let's examine the coding for this:

<>

{' '}

{' '}

  

  {' '}

  {' '}

{' '}

  {' '}

{' '}

</>

Button Tags

The React component

Utilizing the prop inside this

React Bootstrap will take care of adhering to the necessary ARIA requirements.

 Let's examine the coding for this:

<>

{' '}



{' '}

 {' '}

</>

To gain in-depth knowledge with practical experience in React Js, Then explore HKR's React JS Training!

React JS Training

  • Master Your Craft
  • Lifetime LMS & Faculty Access
  • 24/7 online expert support
  • Real-world & Project Based Learning

Size

You can use size props with the values "size=sm" or "size=lg" or similar expressions to change the size of fancy buttons in the React application.

 Let's examine the coding for this:

<>


{' '}




{' '}



</>

Active State

You only have to set the button's component also as an active prop if you require the state of a button to be the active state.

 Let's examine the coding for this:

<>

  {' '}

  

</>
Top 30 frequently asked React Native Interview Questions!

Disabled State

When you add the disabled button to that same prop component, you may create inactive buttons that function similarly to the active buttons.

 Let's examine the coding for this:

<>
{' '}
{' '}

</>

Checkbox or Radio Button

You only have to set the button's component as an active prop if you require the state of a button to be the active state.

 Let's examine the coding for this:

function ToggleButtonEg() {
const [check, setCheck] = useState(false);
const [radioValue, setRadioValue] = useState('1');
const radios = [
{ name: 'Active', value: '1' },
{ name: 'Radio', value: '2' },
{ name: 'Radio', value: '3' },
];
return (
<>

<ToggleButton
id="toggle-check"
type="checkbox"
variant="secondary"
check={check}
value="1"
onChange={(e) => setCheck(e.currentTarget.check)}
>
Check


)

Controlled State

Controlled Components in React are those in which the form's data is handled by the component's state. It tends to take its current value via props and modifies it via callbacks such as onClick, onChange, and so on. A root is associated with its own state and will pass new values to a controlled component as props.

We're making a simple form with an input field, a label name, along with a submit button. We're writing a onSubmit function that fires when it is submitted, displaying the name we typed into the alert box.

Using the useState hook, we create a state name that also stores the value that is entered in the input box. In the input field, we create an onChange function that saves the data we enter in the input field to our state. When the form is submitted, another function, handleSumit, is called, and it displays the name we entered in the alert box. 

Let us see an example below to understand controlled components in ReactJS

import { useState } from 'react';

function App() {

const [N, setName] = useState('');

function handleSubmit() {

alert(`Name: ${N}`);

}
return (


Controlled ReactJS Component







setName(e.target.value)} />


)
}
export default App;

Subscribe to our youtube channel to get new updates..!

Uncontrolled State

Here, we're going to use ReactJS to construct uncontrolled buttons. 

Three of the buttons would be checkbox buttons, with two of them already checked. Additionally, we'll create 3 radio buttons, with Radio 1 already ticked.

 The code will be applied in the following manner for an uncontrolled state:

<>


Checkbox 1 (pre-check)


Checkbox 2


Checkbox 3 (pre-check)






Radio 1 (pre-check)


Radio 2


Radio 3


</>

Block Buttons

Using a combination of our display as well as gap utilities, you can supportability stacks of full-width, "block buttons" like those in Bootstrap 4.

Let us see an example below of block buttons in ReactJS.

 import Button from 'react-bootstrap/Button';

function BlockEg() {

return (






);

}
export default BlockEg;

Want to know more about React Js,visit here React Js Tutorial !

Button Loading State

The spinners can be used for setting the loading state in the react button. Spinners can be quickly added to React buttons, and there are mainly 2 types of loading spinners offered by a bootstrap, circle and grow spinner, both of which are available in a variety of shades.

Loading: It is defined as a boolean property related to the Button component that displays a loading button.

Color: The Button component's color property is used for changing the color of the button.  Orange, Red, green,  blue, cyan, violet, and yellow,  are the possible values for the color property.

The syntax for button loading is:

React JS Training

Weekday / Weekend Batches

Conclusion

So far, everyone has gained a basic understanding of React buttons along with how to use them in various ways to suit their needs.

As you are aware, developing skills is just as important to building a name for yourself in the software business as competence in data structures and algorithms. Consequently, a tech expert should continually keep up with the most recent advancements and developments in the field of web design.

Related Articles

Find our upcoming React JS Training Online Classes

  • Batch starts on 6th Dec 2022, Weekday batch

  • Batch starts on 10th Dec 2022, Weekend batch

  • Batch starts on 14th Dec 2022, Weekday batch

Global Promotional Image
 

Categories

Request for more information

Amani
Amani
Research Analyst
As a content writer at HKR trainings, I deliver content on various technologies. I hold my graduation degree in Information technology. I am passionate about helping people understand technology-related content through my easily digestible content. My writings include Data Science, Machine Learning, Artificial Intelligence, Python, Salesforce, Servicenow and etc.

.