React Button Examples

User Interface > React Button Examples

React Button Examples with Sandbox

In this guide we're going to demonstrate various properties and types of Buttons you can render with React. For each example we will provide an example and the source code. Examples can be found in the sandbox to the right.

Default html button

function sayHello() {
  alert('You clicked me!');
}

// Usage
<button onClick={sayHello}>Default</button>;

You can render a normal html <button> with React, as usual React attribute conventions apply, such as onClick, style, etc.

Button onClick

The button's onClick attribute is what allows us to add a function which fires when the user clicks on the button. In the above example, we define a function sayHello which alerts a message. Then, we use this function as the value of the onClick attribute.

Button text

Changing the inner content between the button tags changes the text of the button. In this very simple first example, "Default Button" is between the two Button tags, and that sets the Button's text.

This button looks very outdated, so we'll show how to restyle this using styled-components.

Default browser button styles

Fun fact, if you inspect the default Button with the webkit inspector (right-click -> inspect), you can see the browser's default styles defined in the user agent stylesheet.

button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: buttonface;
    box-sizing: border-box;
    margin: 0em;
    font: 400 11px system-ui;
    padding: 1px 7px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-image: initial;
}

Button Component Style

Using styled-components, we can create our own React button component and style it with css inside the template tag. If you're not familiar with styled-components, check out our guide here. Styling a button is not much different than styling a div, except we're adding styles on top of the browser's already styled button, so the good news is that we don't need to add too many properties here to make it look nice. For example, the html button's text is already centered for us.

Our restyled button with styled-components

We mainly want to change the background color, increase the font size, add more padding (vertical then horizontal below), add a border radius, and change the cursor to a pointer. Doing those 5 things will give you a modern looking React Button you can use.

Button disabled

The html button already has a disabled property which disables the button, but we can to apply more styles to our Button when it's disabled. Using the &:disabled selector, we'll dim the button with a 70% opacity, change the text color and change the cursor back to the default.

Let's look at our code so far:

const Button = styled.button`
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 10px 60px;
  border-radius: 5px;
  margin: 10px 0px;
  cursor: pointer;

  &:disabled {
    color: grey;
    opacity: 0.7;
    cursor: default;
  }
`;

// Usage
<Button disabled onClick={sayHello}>
  Disabled Button
</Button>

Button as a link and redirect

Wrapping a button in a link tag transforms it into a link. Really any content you place in an <a> tag will become a link, even images. Then, using the href property, you can redirect to a new page.

<a href="https://react.school" target="_blank">
  <Button> Link Button </Button>
</a>

Button group

You can use display: flex to create a group of buttons by turning a <div> into a flexbox.

const ButtonGroup = styled.div`
  display: flex;
`
// Usage
<ButtonGroup>
  <Button> Group 1 </Button>
  <Button> Group 2 </Button>
</ButtonGroup>

Button toggle

In order to add toggle functionality we need to keep track of the state of which button is toggled. We're going to use React hooks for that. We loop through a types array which we use for the text for the Button, but also as the string to keep track of which button is active. We initialize the useState hook with the first type from the array. Then, we loop over the types and render a ButtonToggle, which is extended from our other Button we had previously created so we could add styles to dim the opacity when it is not active (default). When it is active, it's back to the normal opacity.

We check active, which is the current state, against the type that we loop over. When we click on the Button, we run our arrow function which calls the setActive setter. This sets the next active button to be whatever type we click on. This example is practically identical to our tabs guide except we remove the background on the Buttons to make them look like tabs there.

Material UI Buttons

If you'd prefer to use an open-source Button, check out our tutorial on Material-UI Buttons.

Lesson 1/7

import React, { useState } from "react";
import styled from "styled-components";

const theme = {
  blue: {
    default: "#3f51b5",
    hover: "#283593",
  },
  pink: {
    default: "#e91e63",
    hover: "#ad1457",
  },
};

const Button = styled.button`
  background-color: ${(props) => theme[props.theme].default};
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  outline: 0;
  border: 0; 
  text-transform: uppercase;
  margin: 10px 0px;
  cursor: pointer;
  box-shadow: 0px 2px 2px lightgray;
  transition: ease background-color 250ms;
  &:hover {
    background-color: ${(props) => theme[props.theme].hover};
  }
  &:disabled {
    cursor: default;
    opacity: 0.7;
  }
`;

Button.defaultProps = {
  theme: "blue",
};

function clickMe() {
  alert("You clicked me!");
}

const ButtonToggle = styled(Button)`
  opacity: 0.7;
  ${({ active }) =>
    active &&
    `
    opacity: 1; 
  `}
`;

const Tab = styled.button`
  padding: 10px 30px;
  cursor: pointer;
  opacity: 0.6;
  background: white;
  border: 0;
  outline: 0;
  border-bottom: 2px solid transparent;
  transition: ease border-bottom 250ms;
  ${({ active }) =>
    active &&
    `
    border-bottom: 2px solid black;
    opacity: 1;
  `}
`;

function TabGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <>
      <div>
        {types.map((type) => (
          <Tab
            key={type}
            active={active === type}
            onClick={() => setActive(type)}
          >
            {type}
          </Tab>
        ))}
      </div>
      <p />
      <p> Your payment selection: {active} </p>
    </>
  );
}

const types = ["Cash", "Credit Card", "Bitcoin"];

function ToggleGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <div>
      {types.map((type) => (
        <ButtonToggle active={active === type} onClick={() => setActive(type)}>
          {type}
        </ButtonToggle>
      ))}
    </div>
  );
}

export default function App() {
  return (
    <>
      <h1> Button Examples </h1>
      <div>
        <button onClick={clickMe}>Default Button</button>
      </div>
      <div>
        <Button onClick={clickMe}>Styled Button</Button>
      </div>
      <div>
        <Button theme="pink" onClick={clickMe}>
          Pink theme
        </Button>
      </div>
      <div>
        <Button disabled onClick={clickMe}>
          Disabled
        </Button>
      </div>
      <a href="https://react.school" target="_blank">
        <Button>Link</Button>
      </a>
      <ToggleGroup />
      <TabGroup />
    </>
  );
}

Open Sandbox