ReactJS Buttons
Last updated on Dec Fri, 2022 3097

How to create a button in Reach JS
For your project to use the React Bootstrap button, install the following package.
Npm install [email protected] 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:
<>
{' '}
</>
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
)
}
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:
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
About Author
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.
Upcoming React JS Training Online classes
Batch starts on 6th Oct 2023 |
|
||
Batch starts on 10th Oct 2023 |
|
||
Batch starts on 14th Oct 2023 |
|
FAQ's
.