Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
- Buttons will wrap their content if placed inside a
Stackcomponent, otherwise they will expand to the width of the container
- Buttons wrap their content, regardless of the container they are placed in
|✅ Do||🛑 Don't|
|Align buttons vertically||Buttons should not be stacked horizontally|
|Use short, succinct titles that describe an action|
|Use an icon to supplement the title of the button|
|Use only a single primary Button per section|
|Primary buttons should be before secondary buttons|
For more guidelines, refer to Polaris' Button best practices.