title: Customize buttons with SweetAlerts 2
body: <p>I need to match the custom design that was given to me. I am currently using SweetAlerts 2 for all dialog boxes with confirm and cancel. I need the cancel button to have a white background and teal colored text and teal colored border. Also borders for both buttons need a radius of 25px.</p>
  
  <p>I can not find any parameters in the documentation that will do these things. I also can not find any other resources only for accomplishing this.</p>
  
  <pre><code>  // Delete click
    handleDeleteClick = () =&gt; {
      // Warning alert before delete
      Swal({
        title: 'Are you sure you want to delete this item?',
        type: 'warning',
        reverseButtons: true,
        showCancelButton: true,
        confirmButtonColor: '#4DB6AC',
        cancelButtonColor: 'white',
        confirmButtonText: 'Delete',
      }).then((result) =&gt; {
        if (result.value) {
          // Delete task
          axios.delete(`/api/goals/tasks/${this.props.task.id}`)
            .then(this.handleDeleteClickSuccess)
            .catch(this.handleDeleteClickError);
        }
      });
    }
  </code></pre>
  
  <p>I need the cancel button to have a white background and teal colored text and teal colored border. Also borders for both buttons need a radius of 25px.</p>
  
  <p>EDIT:</p>
  
  <pre><code>/* Material UI styling */
  const styles = theme =&gt; ({
    heading: {
      backgroundColor: '#E3E3E3',
      border: '1px solid #cccccc',
    },
    buttonsRight: {
      justifyContent: 'flex-end',
    },
  });
  </code></pre>