Angular Material中Cancel按钮及Cancel/Create按钮布局规范咨询

Hey there! Let’s break down the layout rules for Cancel and Create buttons in Angular Material, straight from the Material Design spec that Angular Material adheres to:

Placement #

• Both buttons should sit in the bottom-right corner of your container (like a dialog, form card, or modal). This aligns them with the natural flow of form content and keeps the UI visually balanced.

Button Order #

The correct order is Cancel first, then Create (visually: Cancel | Create), and here’s the reasoning:

• Material Design prioritizes the primary action (Create, since it’s the task-completing, positive action) by placing it in the most prominent, easy-to-reach spot (far right).
• The secondary action (Cancel, which abandons the task) sits to the left of the primary button. This reduces accidental clicks on the high-stakes primary action, while still keeping the cancel option accessible.
• You’ll notice this pattern in all official Angular Material examples (like MatDialog footers)—secondary/negative actions always lead, with primary/positive actions trailing on the right.

Quick Implementation Tip #

For dialogs, use Angular Material’s mat-dialog-actions container (which defaults to right alignment) and add your buttons in the correct order:

<div mat-dialog-actions align="end">
  <button mat-button (click)="handleCancel()">Cancel</button>
  <button mat-raised-button color="primary" (click)="handleCreate()">Create</button>
</div>

内容的提问来源于stack exchange，提问作者user9335104