DEV Community


ReactJS Buttons CheatSheet

bhavaniravi profile image Bhavani Ravi Originally published at Medium on ・2 min read

Using buttons? You got them all here

Most frontend devs life revolves around creating components and styling them. Me as a backend dev, found myself going through 4–5 StackOverflow links before I could get a single button component up and running. Here is a list of basic operations.

Create New React Project

npx create-react-app react\_button\_cheatsheet

How to Create a Button

class UpgradedButton extends React.Component{

Make It Look Pretty

const StyledButton = styled.button`
    position: absolute;
    height: 10%;
    width: 10%;
    top: 50%;
    font-size: 2.6vmin;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 3px 20px;
    border-width: initial;
    background-color: grey;
    color: white;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;

**// change this line in UpgradedButton**  
// <button>Submit</button>

Change Color OnHover

Add this to the style components’ CSS string

const StyledButton = styled.button`
    &:hover {
       background-color: #445b65;
       color: white;

Handle Onclick event

handleClick = () => {
    console.log("Button clicked...")


<Button onClick={this.handleClick}>Submit</Button>

Change Text OnClick

handleClick = () => {
   buttonText = this.state.buttonText == "Start" ? "Stop" : "Start"      
   this.setState({buttonText: buttonText})

The Complete Code

Something is missing? Leave it on the comment. Liked what you read? Leave a shoutout on Twitter @geeky_bhavani

Discussion (0)

Editor guide