Primary button vs secondary button

the component tree for persepctive has many new/redone components. Some of them have multiple versions, including the Button component. It has Primary and Seconday.

The mouse-over gives the same exact description for each. In addition, I could not find any explanation of the differences in the manual.

What is the difference between these buttons? What is one intended to be used for vs the other?


They differ only in the props.primary true / false setting and provide a simple way of having two styles of button.

This could be a simple way of differentiating navigation buttons (that can be pressed without fear of switching something on or off) and action buttons (that will switch something on or off!). Many of the components now have options such as “row” or “column” options from the component menu to save a little work later on.

See this for a little more on the topic:

The other way these are used in application UIs is to highlight the primary and secondary actions such as in a confirmation popup, the OK or Save would be primary and would attract more attention whereas cancel would be less attracting, eg no background fill just a border

As @nminchin said, I typically use the two different types when a user has a choice to make and I want to make one choice appear as a sort of “recommended” option. This forum actually has an example when you’re replying in a thread: note the “Reply” (primary) and “cancel” (secondary) buttons.

Not only is “Reply” much easier to see, but they also capitalized the text because that’s probably the button you are looking for. The “cancel” button is also an option, but it’s probably not what you’re looking for.