In-Dialog Button Alignmentīuttons should be aligned to the lower right corner of dialogs. Don't stretch or apply width to a button.Don't fill a dialog with a button that stretches across the dialog. Do use clear, concise wording such as "Save", "Don't Save", "Create", etc.īuttons should be only slightly wider than the text within them (unless the text is extremely short).Don't use ambiguous wording such as "Yes", "No", "Ok", etc.Avoid ambiguous phrasing like "Yes", "Ok", etc. (e.g., "Export Artboard")ĭon't make your user guess as to what the button will do when they tap or click it. (e.g., "Export Artboard To Your Storage Device") Don't use punctuation in your buttons.Button text should usually be one or two words long, and no more than four words. Your users should be able to infer the button's intent quickly. Don't use all capital letters to call attention to a button.
import React from "react" Ĭonst platform = require( "os").platform() Ĭonst isWindows = platform.toLowerCase().substr( 0, 3) = "win"
Show me how to override the button order. In that case, you'll need to override the button order. This works well when there are only one or two buttons in a dialog footer, but doesn't work for all situations.
The element assumes that your button order is in the macOS order, and will reverse the order when the plugin is running on Windows. On XD, button order is determined automatically when placed within a element. macOS, for example, will place the primary action in the lower right corner of a dialog, whereas on Windows, the same location is typically reserved for a cancel button.
macOS and Windows utilize different button orders. You should prefer the button order that the platform your plugin is running on utilizes.