ui > Button

React Button Examples

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. All the examples can be found in the CodeSandbox below:

React Button CodeSandbox

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 prop conventions apply, such as onClick, style, etc.

Button onClick

The button's onClick prop 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 prop.

Button text

Changing the inner content between the button tags changes the text of the button. "Button Text" 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:

const Button = styled.button`
background-color: black;
color: white;
font-size: 20px;
padding: 10px 60px;
border-radius: 5px;
margin: 10px 0px;
cursor: pointer;
`;
// Usage
<Button onClick={sayHello}>
Disabled Button
</Button>

Button disabled

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>

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.

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 flexbox to create a group of buttons.

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.

import React, { useState } from 'react';
const Button = styled.button`
/* Same as above */
`;
const ButtonToggle = styled(Button)`
opacity: 0.6;
${({ active }) =>
active &&
`
opacity: 1;
`}
`;
const ButtonGroup = styled.div`
display: flex;
`;
const types = ['Cash', 'Credit Card', 'Bitcoin'];
function ToggleGroup() {
const [active, setActive] = useState(types[0]);
return (
<ButtonGroup>
{types.map(type => (
<ButtonToggle
key={type}
active={active === type}
onClick={() => setActive(type)}
>
{type}
</ButtonToggle>
))}
</ButtonGroup>
);
}

🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.