Learn to Create & Use ReactJS Buttons

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" />

</>

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

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 />);

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

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 />);

Accelerate your career as a skilled MERN Stack Developer by enrolling in a unique Full Stack Developer - MERN Stack Master's program. Get complete development and testing knowledge on the latest technologies by opting for the MERN Stack Developer Course. Contact us TODAY!

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 Developer - MERN Stack 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.