How to align buttons in the MdDialog md-dialog-actions block

Question

In the MdDialog's md-dialog-actions block, is it possible to align a button on the left while there are two buttons aligned to the right?

Here's a plnkr of some stuff I'm trying to do. Say, on the first modal, how do I separate the Yes and No buttons? (See the common-model.component.ts file) (This plnkr has some other issues to it that I'm still working on. But it doesn't involve this question.)

import { Component }   from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'common-modal',
    template: `
      <h2 md-dialog-title id="modal-title">{{ title }}</h2>
      <md-dialog-content>
        <p class="dialog-body" id="modal-message">{{ message }}</p>
      </md-dialog-content>
      <md-dialog-actions align="right">
        <button md-raised-button 
                md-dialog-close 
                id="modal-close-btn">
          {{ buttonOptions.closeText }}
        </button>
        <button md-raised-button 
                *ngIf="buttonOptions.enableNext" 
                id="modal-next-button"
                (click)="dialogRef.close(true)">
          {{ buttonOptions?.nextText }}
        </button>
      </md-dialog-actions>`,
})
export class CommonModalComponent {
    /**
     * {string} The text for the header or title of the dialog.
     */
    title: string;
    /**
     * {string} The text for the body or content of the dialog.
     */
    message: string;
    /**
     * closeText  {string}  The text of the close button. (No, Done, Cancel, etc)
     * nextText   {string}  The text of the confirming button. (Yes, Next, etc)
     * enableNext {boolean} True to show the next button. False to hide it.
     */
    buttonOptions: {
        closeText: string,
        nextText?: string,
        enableNext: boolean
    };


    constructor(public dialogRef: MdDialogRef<CommonModalComponent>) { }
}

Answer 1

You can align md-dialog-actions with the align attribute which is available Material 2.0.0-beta.2 on words. Update version if you are not on the latest. You can use "end" or "center" to align.

<md-dialog-actions align="end"> ... </md-dialog-action>

If you want to align buttons individually, it needs custom styles on them. Use custom styles on buttons to separate them as well (This may be fixed in next material version)