Now notice that these buttons have quite a bit different styling than our traditional submit button that we have on our login-form, it's a lot bigger and different so what we want to do is create a custom button for what we need.

We've already kind of built this component out with our edit and new newsletter buttons, and I would want to use it except for I want to be able to have it be a part of redux form and that way we have to use an input, not just an 'a' tag. We should be using a submit button, an actual HTML form submit button.

So let's go and build a cancel button and a submit button. Pretty simple. All we have to do is throw in a button and we'll just copy it from sign-in. So let's go to signinForm.js and let's copy this login button, and paste that into our form and then let's change some of the attributes.

newsletterNewForm.js

      <Field 
        className="sign-in-form__submit"
        name="Submit"
        type="submit"
        title="Submit"
        component={FormButton}
      />

Now let's go check it out in our application.

So we want to do is change the styles a bit and then place it on the grid elsewhere. So instead of changing the styles of this component what we need to do is introduce more styles because we don't want to ruin our login button.

But when you click it you'll notice it's the submit button and it is going back through our newsletter-new-form into our newsletter-new and trying to handle submit, and that's why we want to submit this because it's already hooked up to the Redux form.

If we used our button.js component, we'd have to manually set stuff up, so we don't want to do that. Let's go ahead and go into our form and let's write some styles for this.

So we have two ways that we could do this. we could pass in a second className, like button-small, that we could style with css. Or we could actually pass in a boolean of small and just mark it true or not.

That's what I'd prefer to do because it's more like an option. We don't really want to have it in our className, since that's more of hard-codeing it. I prefer to have a property that says "Hey this is a small submit button".

And then we can have another one that says red={true} or we can say like cancel="true" on them because we want to have the ability to have a red button and a normal kind of cancel button like our design says.

Now what I think I'm going to do is say red is equal to true, because that makes more sense, or danger is equal to true because that's how these things were kind of named. If you've done any bootstrap, it's usually named danger if it's red just because it's like a warning.

Let's go out in these styles. They're going to be really similar to our button styles, so let's go to button.scss, we're going to be similar to this. So it's good to use for our buttons, except for the width is going to be 130 pixels or so. So what we want to do is basically if it's small just include the button styles.

So let's close out of that and let's go into FormButton in formFields.js and let's add in our small parameter.

formFields.js

export class FormButton extends Component {
    render() {
        const { className, title, input, type, small } = this.props;
        return (
            <div className={`${className} ${small ? 'button' : 'form-button'}`}>
                <button
                    className={`${small ? 'button' : 'form-button'}__button `}
                    type={type}
                    {...input} 
                >
                {title}
                </button>
            </div>
        )
    }
}

So if you go to your browser you'll see that our login is still normal, but our submit button will have our different styles.

So what we need to do now is go into form-fields.scss and let's add in some custom button styles.

form-fields.scss

.form-button-small {
    &__button {
        border-radius: 1.6rem;
        border: 1px solid $color-gray-4D;
        width: 7.4rem;
        height: 2.4rem;

        font-size: 1.4rem;
        line-height: 1.7rem;
        text-align: center;

        width: 1.3rem;
    }
}

Then what we'll do is we'll go into formFields.js and change our class name to match.

formFields.js

export class FormButton extends Component {
    render() {
        const { className, title, input, type, small } = this.props;
        return (
            <div className={`${className} ${small ? 'form-button-small' : 'form-button'}`}>
                <button
                    className={`${small ? 'form-button-small' : 'form-button'}__button `}
                    type={type}
                    {...input} 
                >
                {title}
                </button>
            </div>
        )
    }
}

Now this is pretty repetitive but we'll leave it there for now. Let's check out our button.

That's pretty awesome. So what we need to do now is give it an option to be red, because it's not red. So let's add that option to our button in newsletterNewForm.js.

newsletterNewForm.js

      <Field 
        className="sign-in-form__submit"
        small={true}
        danger={true}
        name="Submit"
        type="submit"
        title="Submit"
        component={FormButton}
      />

Now we need to add it into our formFields.js

formFields.js

export class FormButton extends Component {
    render() {
        const { className, title, input, type, small, danger } = this.props;
        return (
            <div className={`${className} ${small ? 'form-button-small' : 'form-button'}`}>
                <button
                    className={`
                        ${small ? 'form-button-small' : 'form-button'}__button 
                        ${danger ? 'form-button-small__danger' : ''}
                    `}
                    type={type}
                    {...input} 
                >
                {title}
                </button>
            </div>
        )
    }
}

Now let's go into our form-fields.scss and pass in styles for danger.

form-fields.scss

.form-button-small {
    &__button {
        border-radius: 1.6rem;
        border: 1px solid $color-gray-4D;
        width: 7.4rem;
        height: 2.4rem;

        font-size: 1.4rem;
        line-height: 1.7rem;
        text-align: center;

        width: 1.3rem;
    }

    &__danger {
        border: none;
        color: white;
        background: $color-red-BA;
    }
}

Now let's look at it.

So this has been a longer video, but we've been able to create a really reusable and custom component which is really good. So what we'll do in the next guide is throw in the cancel button and throw them both on the grid where they belong.

So let's commit our code.

git status
git add .
git commit -m "added additional button option to form-button component"

See you in the next video.

Resources

Code at this stage