Primary and Secondary Button Style

Ignition Early Access
1

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?

1 Like
2

Windows:

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

macOS (similar for Linux):

/usr/local/ignition/data/modules/com.inductiveautomation.perspective/themes

Without any changes to that file, you want line 146:

.button-secondary {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #000000;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-clip: padding-box;
  border: 1px solid #C1C9D0;
  background-color: #D7DBDE;
  background-size: 101% 101%;
  color: #70757A;
  font-weight: 700;
  display: inline-block;
  text-decoration: none; }
  .button-secondary img {
    vertical-align: middle; }
  .button-secondary.icon-left img {
    padding-right: 0.25rem; }
  .button-secondary.icon-right img {
    padding-left: 0.25rem; }
  .button-secondary svg {
      fill: #70757A; }  
  .button-secondary:hover, .button-secondary:active {
    background-color: #D6DBDE; 
    cursor: pointer; }
  .button-secondary:hover {
    box-shadow: 0 2px 4px 0 rgba(34,34,34,0.4); }
  .button-secondary:active {
    box-shadow: inset 0 0 8px 4px rgba(34,34,34,0.4); }
  .button-secondary:disabled {
    pointer-events: none;
    background-color: #DDE1E4; }
2 Likes
3

Hi there,

is this the only solution to change how a button responds to mouse gestures? Hover and click is defined in our customers design guide, and Id like to change them to alter background color related to the border color.

Cheers.

4

You can create “styles” which allows you to have a hover state.