Defines how action buttons are arranged and sized within the dialog footer area. Controls both positioning and sizing behavior using CSS flexbox layout properties. Choose based on the number of buttons and desired user experience patterns.
Definition
Fields
Centers action buttons horizontally within the footer container. Buttons maintain their natural width and are grouped in the middle of the footer. Use for balanced layouts or when buttons have equal importance. BEST FOR: Single important action, or multiple buttons of equal priority.
Center = 1Aligns action buttons to the right side of the footer container. Buttons maintain their natural width and appear at the end of the footer. Common pattern for primary actions, following typical OK/Cancel conventions. BEST FOR: Primary actions like Save, OK, Submit where prominence is important.
End = 2Aligns action buttons to the left side of the footer container. Buttons maintain their natural width and appear at the beginning of the footer. Use when buttons should not be prominent or when following left-to-right reading patterns. BEST FOR: Secondary actions, non-critical buttons, or when space is limited.
Start = 0Stretches action buttons to fill the entire footer width with equal sizing. Each button receives equal width regardless of text content length. Creates uniform appearance and maximizes touch targets for mobile interfaces. BEST FOR: Mobile interfaces, multiple buttons of equal importance, or consistent sizing needs.
Stretch = 3