Button

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

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.