Using type='submit' for custom button component?

Question

I have a CustomButton component I want to be able to reuse throughout my app. If I want to use it as a submit button for a contact form, am I able to just use it like this, <CustomButton type='submit'>Submit</CustomButton> or do I have to pass in the type as props somehow? that way if I use the button for something else like linking to a github repo I can change it.

This is my CustomButton component as of now.

import React from 'react'
import { css } from '@emotion/core'

import { COLORS } from '../constants'

const CustomButton = ({ children }) => {
  return (
    <button
      css={css`
        color: ${COLORS.primaryTextColor};
        font-size: 1rem;
        width: 125px;
        height: 50px;
        background: none;
        border: 2px solid ${COLORS.secondaryTextColor};
        border-radius: 5px;
        cursor: pointer;
      `}
    >
      {children}
    </button>
  )
}

export default CustomButton

Robbin van der Jagt · Accepted Answer · 2020-05-05 15:33:20Z

1

I would probably do something like this. This wat your button will always be of type 'button' by default. Unless you want to change it for a specific component. Then you'd something like <CustomButton type="submit" />

const CustomButton = ({ children, type = "button" }) => {
  return (
    <button
      type={type}
      css={css`
        color: ${COLORS.primaryTextColor};
        font-size: 1rem;
        width: 125px;
        height: 50px;
        background: none;
        border: 2px solid ${COLORS.secondaryTextColor};
        border-radius: 5px;
        cursor: pointer;
      `}
    >
      {children}
    </button>
  )
}

answered May 5, 2020 at 15:33

Robbin van der Jagt

7944 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user12783961 Over a year ago

So if I wanted the default button I would just do <CustomButton>Submit</CustomButton>, but if I wanted it with type submit I would just add in the type props?

Robbin van der Jagt Over a year ago

Exactly! Sorry for my late response, I wrote this anwser just before I left work

user12783961 Over a year ago

No worries, thank you. Would you say there are any advantages in using prop-types and setting the decaults that way? Or is it the same thing just adding another layer of “complexity”?

Robbin van der Jagt Over a year ago

I wouldn't use proptypes for the default, but you could add a ` type: PropTypes.oneOf(['button', 'submit', '..other cases you might have'])`

Collectives™ on Stack Overflow

Using type='submit' for custom button component?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related