# Primary button vs secondary button

**URL:** <https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 28, 2022, 8:51pm UTC](https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649 "2022-02-28T20:51:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![joe.miller](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@joe.miller](https://forum.inductiveautomation.com/u/joe.miller)\
**Post date:** [February 28, 2022, 8:51pm UTC](https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649/1 "2022-02-28T20:51:50Z")

</div>

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?

Thanks,

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 28, 2022, 9:11pm UTC](https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649/2 "2022-02-28T21:11:41Z")

</div>

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:

> [@Primary and Secondary Button Style](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832):
>
> There was a recent update to the button object that created a property called Primary which toggles between the primary and secondary style. How/where do you define what the secondary style is?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 1, 2022, 8:31am UTC](https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649/3 "2022-03-01T08:31:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 1, 2022, 4:08pm UTC](https://forum.inductiveautomation.com/t/primary-button-vs-secondary-button/56649/4 "2022-03-01T16:08:26Z")

</div>

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.