In React, you can customize button styles for actions in forms, dialogs, and more with the help of multiple states, sizes etc.
React has many button styles. The users can use any button style to create a styled button quickly; only the variant prop needs to be modified.
Now let us first go through the installation process.
Installing React Bootstrap
Install the following package for using React Bootstrap button in your project.
npm install react-bootstrap bootstrap@5.1.3
And you can import the specific components in the following way :
import Button from 'react-bootstrap/Button';
Or,
import { Button } from 'react-bootstrap';
You can add the css through the following way :
import 'bootstrap/dist/css/bootstrap.min.css';
Let us go through some code for the button style types:
<>
<Button variant="primary">Primary Button in React</Button>{' '}
<Button variant="secondary">Secondary Button in React</Button>{' '}
<Button variant="success">Success Button in React</Button>{' '}
<Button variant="warning">Warning Button in React</Button>{' '}
<Button variant="danger">Danger Button in React</Button> <Button variant="info">Info Button in React</Button>{' '}
<Button variant="light">Light Button in React</Button> <Button variant="dark">Dark Button in React</Button>{' '}
<Button variant="link">Link Button in React</Button>
</>
Outline Buttons
Outline buttons are the buttons with lighter touch and no background color. For these types of buttons, for the variant attribute, before the button type, we add an extra “outline-”.
Let us see the code explanation for this:
<>
<Button variant="outline-primary">Primary Outline Button in React</Button>{' '}
<Button variant="outline-secondary">Secondary Outline Button in React</Button>{' '}
<Button variant="outline-success">Success Outline Button in React</Button>{' '}
<Button variant="outline-warning">Warning Outline Button in React</Button>{' '}
<Button variant="outline-danger">Danger Outline Button in React</Button>{' '}
<Button variant="outline-info">Info Outline Button in React</Button>{' '}
<Button variant="outline-light">Light Outline Button in React</Button>{' '}
<Button variant="outline-dark">Dark Outline Button in React</Button>
</>
Button Tags
In general, the HTML button element is rendered by the <Button> component in React. It can be rendered however you want, such as the Button component in React can be rendered to <a><a> tag if href has been passed as the props to the Button component.
Whatever your heart desires to render, that can be rendered by using the as prop in the <Button> element.
The proper rules of ARIA will be taken care of by the React Bootstrap.
Let us go through a code example.
<>
<Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
<Button as="input" type="button" value="Input" />{' '}
<Button as="input" type="submit" value="Submit" />{' '}
<Button as="input" type="reset" value="Reset" />
</>
Size
If you want to use fancy buttons such as large or small buttons in your React application, then you can do this size variation by using size prop as “size=sm” or “size=lg etc.
Let us see the code for this:
<>
<div className="mb-2">
<Button variant="primary" size="lg">
Large button size in React
</Button>{' '}
<Button variant="secondary" size="lg">
Large button size in React
</Button>
</div>
<div>
<Button variant="primary" size="sm">
Small button button size in React
</Button>{' '}
<Button variant="secondary" size="sm">
Small button button size in React
</Button>
</div>
</>
Block Buttons
If you need the buttons of full width or responsive stack of full width like the block buttons of “bootstrap 4 “, you can create it in Reactjs just by mixing up the display and the gap lines.
Let us see the code implementation for this:
<div className="d-grid gap-2">
<Button variant="primary" size="lg">
Primary Block button
</Button>
<Button variant="secondary" size="lg">
Secondary Block level button
</Button>
</div>
Active State
If you need a button’s state to be an active state, then you just need to set the button’s component as the active prop.
Let us see the code implementation for this:
<>
<Button variant="primary" size="lg" active>
Primary Active button
</Button>{' '}
<Button variant="secondary" size="lg" active>
Secondary Active Button
</Button>
</>
Disbaled State
Just like active buttons, you can also make disabled buttons and by adding the disabled prop to the button component.
Let us see the code implementation:
<>
<Button variant="primary" size="lg" disabled>
Primary Disabled Button
</Button>{' '}
<Button variant="secondary" size="lg" disabled>
Secondary Disabled Button
</Button>{' '}
<Button href="#" variant="secondary" size="lg" disabled>
Secondary Disabled Link Button
</Button>
</>
Button Loading State
It can be a very good User Experience pattern to give the user feedback as to a loading state when activating an asynchronous action from a button. This can be done easily just by updating our Button ‘s props from a state change.
Let us go through the code implementation for this:
function simulateNetworkRequest() {
return new Promise((resolve) => setTimeout(resolve, 2000));
}
function LoadingButton() {
const [isLoading, setLoading] = useState(false);
useEffect(() => {
if (isLoading) {
simulateNetworkRequest().then(() => {
setLoading(false);
});
}
}, [isLoading]);
const handleClick = () => setLoading(true);
return (
<Button
variant="primary"
disabled={isLoading}
onClick={!isLoading ? handleClick : null}
>
{isLoading ? 'Loading…' : 'Click to load'}
</Button>
);
}
render(<LoadingButton />);
Checkbox / Radio Button in ReactJS
In ReactJS, you can use buttons to style checkbox and radio form elements too. This can be useful when you want a toggle button that works neatly inside an HTML form.
Let us see the code implementation for this:
function ToggleButtonExample() {
const [checked, setChecked] = useState(false);
const [radioValue, setRadioValue] = useState('1');
const radios = [
{ name: 'Active', value: '1' },
{ name: 'Radio', value: '2' },
{ name: 'Radio', value: '3' },
];
return (
<>
<ButtonGroup className="mb-2">
<ToggleButton
id="toggle-check"
type="checkbox"
variant="secondary"
checked={checked}
value="1"
onChange={(e) => setChecked(e.currentTarget.checked)}
>
Checked
</ToggleButton>
</ButtonGroup>
<br />
<ButtonGroup className="mb-2">
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
type="radio"
variant="secondary"
name="radio"
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ButtonGroup>
<br />
<ToggleButton
className="mb-2"
id="toggle-check"
type="checkbox"
variant="outline-primary"
checked={checked}
value="1"
onChange={(e) => setChecked(e.currentTarget.checked)}
>
Checked
</ToggleButton>
<br />
<ButtonGroup>
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
type="radio"
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
name="radio"
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ButtonGroup>
</>
);
}
render(<ToggleButtonExample />);
Uncontrolled
Here, we are going to implement uncontrolled buttons in React.
Out of those buttons, three buttons will be checkbox buttons, of which two are pre-checked. And we will make three radio buttons out of which the Radio 1 button will be pre-checked.
For uncontrolled, the code will be implemented in the following way:
<>
<ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
<ToggleButton id="tbg-check-1" value={1}>
Checkbox 1 (pre-checked)
</ToggleButton>
<ToggleButton id="tbg-check-2" value={2}>
Checkbox 2
</ToggleButton>
<ToggleButton id="tbg-check-3" value={3}>
Checkbox 3 (pre-checked)
</ToggleButton>
</ToggleButtonGroup>
<br />
<ToggleButtonGroup type="radio" name="options" defaultValue={1}>
<ToggleButton id="tbg-radio-1" value={1}>
Radio 1 (pre-checked)
</ToggleButton>
<ToggleButton id="tbg-radio-2" value={2}>
Radio 2
</ToggleButton>
<ToggleButton id="tbg-radio-3" value={3}>
Radio 3
</ToggleButton>
</ToggleButtonGroup>
</>
Controlled
For controlled buttons, the code implementation will be done as shown below:
function ToggleButtonGroupControlled() {
const [value, setValue] = useState([1, 3]);
const handleChange = (val) => setValue(val);
return (
<ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
<ToggleButton id="tbg-btn-1" value={1}>
Option 1
</ToggleButton>
<ToggleButton id="tbg-btn-2" value={2}>
Option 2
</ToggleButton>
<ToggleButton id="tbg-btn-3" value={3}>
Option 3
</ToggleButton>
</ToggleButtonGroup>
);
}
render(<ToggleButtonGroupControlled />);
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
So till now, we all have understood about React buttons and how they can be used in different ways according to our needs.
As you are aware along with having expertise in data structure and algorithms, your development skill is equally crucial to making a mark in the tech industry. Therefore, a tech professional should always keep himself updated with the latest technology and development in the field of Web Development.
Simplilearn offers some excellent Full Stack Web Development Certificate Courses that you can check out. These courses are designed to help you master both the front-end and back-end with different technologies and tools like AngularMVC and SpringBoot.
If you are looking for short-term courses to upgrade your skill set, Simplilearn also offers free online skill-up courses in domains like data science, business analytics, software development, AI, and machine learning.
