Create React Button



    The code defines two buttons, one labeled "Normal Button" and the other labeled "Primary Button." The "Normal Button" has a light blue background with a 3px border-radius and a 2px solid palevioletred border. The "Primary Button" has a red background with a 2px solid palevioletred border and a white color. The buttons have a 0.5em margin on the left and right and a 1em padding on top and bottom.

    Library: react

    import React from 'react'
    import styled, { css } from 'styled-components'
    const Button = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0.5em 1em;
      padding: 0.25em 1em;
      ${props => props.primary && css`
        background: palevioletred;
        color: white;
    const Container = styled.div`
      text-align: center;
        <Button>Normal Button</Button>
        <Button primary>Primary Button</Button>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    • Security
    • Privacy Policy
    • Code Privacy
    • Terms of Service
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.