Button

Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.

Guidelines

Anchor link to section titled "Guidelines"
  • Buttons will wrap their content if placed inside a Stack component, 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.