Button with one row text

					
<button onClick={this.props.onClick} type={this.props.type} disabled={this.props.isDisabled}>
<span className={'btn-left-icon ' + this.props.leftButtonIcon} />
<span>{this.props.text}</span>
<span className={'btn-right-icon ' + this.props.rightButtonIcon} />
</button>				

					
SCSS Style:

div {
  .bnt-container {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    button {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      font-size: 15px;
      background-color: $navy-blue;
      color: $white;
      width: 100%;
      height: auto;
      font-weight: bold;
      text-transform: uppercase;
      border: none;
      border-radius: 8px;
      padding: 5px;
      margin: 15px;
      height: 55px;
      cursor: pointer;
      outline: none;      
      span {
        align-self: center;
        &.btn-left-icon {
          margin-left: 15px;
          font-size: 38px;
          flex-grow: 0;
        }
        &.btn-text {
          font-size: 18px;
          flex-grow: 0;
        }
        &.btn-right-icon {
          margin-right: 6px;
          flex-grow: 0;
          font-size: 18px;
        } 
      }
    }
  }
}