Button group.

[Sondra Jones]

Emily here is the css code...

Code: Select all

/*Button Style*/
.win-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border-radius: 4px;
	min-width: 150px;
}

.win-button-primary {
	color: #fff;
	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-primary:hover {
	background-color: #00569c;
	border: 1px solid #00569c;
}

.win-button-primary:active {
	background-color: #00569c;
	border: 1px solid #00569c;
	box-shadow: none;
}

.win-button-secondary {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-secondary:hover {
	color: #004883;
	border: 1px solid #004883;
}

.win-button-secondary:active {
	color: #004883;
	border: 1px solid #004883;
	box-shadow: none;
}

.win-button-tertiary {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-tertiary:hover {
	background-color: #b30000;
	border: 1px solid #b30000;
}

.win-button-tertiary:active {
	background-color: #900;
	border: 1px solid #900;
	box-shadow: none;
}

.win-button-big {
	min-height: 50px;
	font-size: 18px;
	border-radius: 6px;
	border-width: 2px;
}

.win-button-big:hover {
	border-width: 2px;
	cursor: pointer;
}

.win-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}	

.win-button-big:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-button-primary[disabled = true] {
	color: #fff;
  	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-secondary[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-tertiary[disabled = true] {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-big[disabled = true] {
    border-width: 2px;
    cursor: not-allowed;
}

.win-action-button {
	border: 1px solid #ccc;
	font-size: 17px;
	border-radius:25px;
	height: 34px;
	color: #0072cf;
	background: #fff;
	padding: 4px 12px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	margin-bottom: 0px;
	white-space: nowrap;
	user-select: none;
}

.win-action-button:hover {
	color: #0072cf;
	border-color: #0072cf;
}

.win-action-button:active {
	color: #0072cf;
	border-color: #0072cf;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.125);
	background-image: none;
}

.win-action-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-action-button[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #ccc;
}

.win-close-icon {
	color: gray; /*TODO:*/
	font-family: "FontAwesome";
	font-size: 24px;
}

.win-image{
	background-position: 13px;
}

.win-button.win-action-button.win-image{
	padding-left: 30px;
}
/*-------------------------------------------------------------------------------------*/
/*End Button Style*/

/*Button Group Styles*/

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:first-child {
	margin-left: 0;
}

.win-button-group .btn {
	white-space: normal;
} 

.btn-group-vertical>.btn, .btn-group>.btn {
	position: relative;
	float: left;
}

.win-button-group label {
    font-weight: bold;
    font-size: 13px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.win-button-group .btn:active, .win-button-group .btn.active {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #0072cf;
    color: #fff;
    border: 1px solid #0072cf;
}

.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover {
    z-index: 2;
}

.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
	margin-left: -1px;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
	background-image: none;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    /*border: 1px solid transparent*/
    border-radius: 4px;
}

[data-toggle=buttons]>.btn input[type=radio]{
	position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
/*--------------------------------------------------------------------------------------------*/
/*End Button Group Styles*/

The button group uses the win-button-secondary so that is why I included that code.

Here is the .js file:

Code: Select all

pui.retrieveCustomLayoutTemplate("buttongroup");

pui.addCustomProperty({
    name: "buttongroup",
    help: "",
    controls: ["buttongroup","btn-group win-button-group","btn btn-default win-button win-button-secondary"],
    category: ""
  });
pui.widgets.add({
    name: "button group",
    newId: "buttongroup",
    
    defaults: {
      "width": "",
      "height":""

      
    },
  
    propertySetters: {
      "field type": function(params) {
  
        var html = pui.layout.templates["buttongroup"];
        params.dom.innerHTML = html;
        var body = params.dom.getElementsByClassName("buttongroup");
      },
  
    }
});

  pui.toolbox.add({
    category: "CSS Buttons",
    widget: "button group",
    text: "buttongroup",
    value:"test",
  
    proxyHeight: 23,
    proxyWidth: 72,
    proxyHTML: pui.layout.templates["buttongroup"],
  
    defaults: {
      "width": "",
      "height": "",
     }
  });

And here is the html file:

Code: Select all

<div class="buttongroup">
        <div class=" btn-group win-button-group" role="group" data-toggle="buttons">
            <label class="btn btn-default win-button win-button-secondary">
            <input type="radio" id="option1" autocomplete="off" name="options">Left
                </label>
            <label class="btn btn-default win-button win-button-secondary">
            <input type="radio" id="option2" autocomplete="off" name="options">Middle
                </label>
            <label  class="btn btn-default win-button win-button-secondary">
                <input type="radio" id="option3" autocomplete="off" name="options">Right
                </label>
        </div>
    </div>

I personally did not code all of this I am just trying to figure out why it is not working as we want it to.

Thanks,

Sondra

[Emily]

Hi Sondra,

Thank you for sending me this information. Looking at what you have, it seems that the :active selector is doing what it's expected to do here. The :active selector will only change the color of your buttons to blue (in your case) while the button is active -- which means you have to be actively clicking on the button (holding down the mouse on that button) in order for the button to change colors. Once you 'let go' of that button, it is no longer active and so the CSS you have set for with the :active selector will no longer be in effect and your button returns to normal. The reason it seems to work how you're expecting it to when you use the developer tools is because when you select the :active selector, it forces that element to be in that state. So choosing :active in the dev tools is essentially the same as you holding down your mouse on the button (and not 'letting go'). Hopefully this makes sense.

So, if you're wanting a clicked button to RETAIN that blue color, I think what you really want to use is the :focus selector like I showed in my previous example. This will change the color of your button until another element receives focus (i.e. you click on another button, somewhere else on the screen, etc.). However, looking at the HTML you are using for this, it seems like you have your buttons set up with a 'radio' type. This may cause some problems when trying to use the :focus selector. You may want to consider using a 'button' type instead, similar to the example I gave previously.

If it helps, there's a reference to the different available CSS selectors on this site here: https://www.w3schools.com/cssref/css_selectors.asp.

Hopefully this information helps with what you're wanting to accomplish with your button group! If there's anything else I can help you with concerning this, please let me know!

--Emily

[Sondra Jones]

Emily,

Below is now my css code for this button group. I am still not getting it to work as it should. But when I do an inspect and click on focus it does do as I would expect it to. Are you suggesting that because the html says radio instead of button that that could be the issue? Or am I doing something else in correct?

I think your example you gave me is a little easier to understand than the one I am trying to do because the button group is using existing buttons but those buttons do not keep the focus when they are clicked because they aren't supposed to when they are a single button. We are only wanting it to keep focus when in a button group and clicked. Does that make sense?

Code: Select all

/*Button Group Styles*/

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:first-child {
	margin-left: 0;
}

.win-button-group .btn {
	white-space: normal;
} 

.btn-group-vertical>.btn, .btn-group>.btn {
	position: relative;
	float: left;
}

.win-button-group label {
    font-weight: bold;
    font-size: 13px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    /*border: 1px solid transparent*/
    border-radius: 4px;
}

.btn-group .btn:focus {
    background-color: #0072cf;
    color: #fff;
    border: 1px solid #0072cf;
}

[data-toggle=buttons]>.btn input[type=radio]{
	position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
/*--------------------------------------------------------------------------------------------*/
/*End Button Group Styles*/

[Megan]

Hello Sondra,

Thank you for your patience! It appears that you are trying to use Bootstrap, which we currently do not support. The data-toggle attribute is not a native attribute and requires that it be handled in some way.

That being said, you can try the following:

HTML TEMPLATE:

Code: Select all

<div class="btn-group" role="group">
  <button id="option1" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Left</button>
  <button id="option2" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Middle</button>
  <button id="option3" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Right</button>
</div>

This will set up the visuals I believe you are after, but does not have the code for handling it. By this I mean that it will not check or uncheck them so they do not stay "selected" or have a true/false state to check for. This functionallity will require additional programming. Adding the onclick attribute to call a function to check and uncheck the buttons might be an option.

ONCLICK EVENT EXAMPLE:

Code: Select all

<button id="option1" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Left</button>

Code: Select all

// I only set the button to checked. I do not uncheck.
function checkBtn(thing) {
    if (thing.checked != true) thing.checked = true;
    else thing.checked = false;
}

Please note that data-toggle was removed, so your CSS would need to be updated, should you use this. Checked may work as an alternative. The example function only checks the clicked button, your CSS would need to be updated for checked true/false and code to uncheck any other clicked buttons in the group would need to be added.

If you are interested in using Bootstrap, we can add you to an existing ticket, Issue #4222 (Bootstrap Capability), and we would inform you of any updates regarding the issue that arise.

I hope this helps! Please let us know if you have any additional concerns or questions!

Thanks,
Megan Bond
support@profoundlogic.com

[Sondra Jones]

Where are you putting the Onclick example event?

[Megan]

Hello Sondra,

I'm sorry I was not very clear on how the onclick event was defined! Please allow me to explain more clearly!

The onclick event is defined in the HTML Template as follows:

Code: Select all

<div class="btn-group" role="group">
  <button id="option1" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Left</button>
  <button id="option2" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Middle</button>
  <button id="option3" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Right</button>
</div>

The function checkBtn() is defined in a js file in /www/[YOUR_INSTANCE]/htdocs/profoundui/userdata/custom/js, I named my file script.js, but the name does not matter.

Code: Select all

// I only set the button to checked. I do not uncheck.
function checkBtn(thing) {
    if (thing.checked != true) thing.checked = true;
    else thing.checked = false;
}

[Sondra Jones]

Hi Emily,

My HTML code is as follows:

Code: Select all

<div class="btn-group" role="group">
  <button id="option1" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Left</button>
  <button id="option2" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Middle</button>
  <button id="option3" type="radio" name="options" class="btn btn-default win-button win-button-secondary">Right</button>
</div>

My JS file is as follows:

Code: Select all

pui.retrieveCustomLayoutTemplate("buttongroup");

pui.addCustomProperty({
    name: "buttongroup",
    help: "",
    controls: ["buttongroup","btn-group win-button-group","btn btn-default win-button win-button-secondary"],
    category: ""
  });
pui.widgets.add({
    name: "button group",
    newId: "buttongroup",
    
    defaults: {
      "width": "",
      "height":""

      
    },
  
    propertySetters: {
      "field type": function(params) {
  
        var html = pui.layout.templates["buttongroup"];
        params.dom.innerHTML = html;
        var body = params.dom.getElementsByClassName("buttongroup");
      },
  
    }
});

  pui.toolbox.add({
    category: "CSS Buttons",
    widget: "button group",
    text: "buttongroup",
    value:"test",
  
    proxyHeight: 23,
    proxyWidth: 72,
    proxyHTML: pui.layout.templates["buttongroup"],
  
    defaults: {
      "width": "",
      "height": "",
     }
  });

And my css code is as follows:

/*Button Style*/
.win-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border-radius: 4px;
	min-width: 150px;
}

.win-button-primary {
	color: #fff;
	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-primary:hover {
	background-color: #00569c;
	border: 1px solid #00569c;
}

.win-button-primary:active {
	background-color: #00569c;
	border: 1px solid #00569c;
	box-shadow: none;
}

.win-button-secondary {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-secondary:hover {
	color: #004883;
	border: 1px solid #004883;
}

.win-button-secondary:active {
	color: #004883;
	border: 1px solid #004883;
	box-shadow: none;
}

.win-button-tertiary {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-tertiary:hover {
	background-color: #b30000;
	border: 1px solid #b30000;
}

.win-button-tertiary:active {
	background-color: #900;
	border: 1px solid #900;
	box-shadow: none;
}

.win-button-big {
	min-height: 50px;
	font-size: 18px;
	border-radius: 6px;
	border-width: 2px;
}

.win-button-big:hover {
	border-width: 2px;
	cursor: pointer;
}

.win-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}	

.win-button-big:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-button-primary[disabled = true] {
	color: #fff;
  	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-secondary[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-tertiary[disabled = true] {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-big[disabled = true] {
    border-width: 2px;
    cursor: not-allowed;
}

.win-action-button {
	border: 1px solid #ccc;
	font-size: 17px;
	border-radius:25px;
	height: 34px;
	color: #0072cf;
	background: #fff;
	padding: 4px 12px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	margin-bottom: 0px;
	white-space: nowrap;
	user-select: none;
}

.win-action-button:hover {
	color: #0072cf;
	border-color: #0072cf;
}

.win-action-button:active {
	color: #0072cf;
	border-color: #0072cf;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.125);
	background-image: none;
}

.win-action-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-action-button[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #ccc;
}

.win-close-icon {
	color: gray; /*TODO:*/
	font-family: "FontAwesome";
	font-size: 24px;
}

.win-image{
	background-position: 13px;
}

.win-button.win-action-button.win-image{
	padding-left: 30px;
}

/*Button Group Styles*/

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:first-child {
	margin-left: 0;
}

.win-button-group .btn {
	white-space: normal;
} 

.btn-group-vertical>.btn, .btn-group>.btn {
	position: relative;
	float: left;
}

.win-button-group label {
    font-weight: bold;
    font-size: 13px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
  	font-family: "Open Sans", arial, helvetica, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    /*border: 1px solid transparent*/
    border-radius: 4px;
}

.btn-group .btn:focus {
    background-color: #0072cf;
    color: #fff;
    border: 1px solid #0072cf;
}
/*--------------------------------------------------------------------------------------------*/
/*End Button Group Styles*/

For all of that code, the button seems to keep the color when clicked without me having to add the onclick event as you had suggested. The problem I am running into now is that the font is not going to what I need it to be. the .btn-group is defaulting to Trebuchet MS when I need it to be Open Sans, arial, helvetica, sans-serif. Do you have any advice for this issues?

[Emily]

Sondra,

I'm glad to hear that Megan was able to help you with the problems you were having with your buttons. As far as your font style goes, setting the font-family in the .btn class worked on my end for your button group. I tried a few different fonts and I didn't seem to have any problems. The problem you're having may be due to the font you're trying to use, or may be a cache issue with your browser.

Please keep in mind that the HTML and CSS you are working with is not specific to Profound UI. If you have any other questions related to the HTML or CSS set up for your button group, I suggest checking out online references for further information such as https://www.w3schools.com.

I hope this helps!

--Emily

[Sondra Jones]

Hi Emily,

I have another question for the button group. We do have the color staying now when we click the button. However, if we click outside of the widget anywhere the color goes away. Do you have any insight on how to fix this?

Thanks,

Sondra

[Megan]

Hello Sondra,

I am providing here a complete example.

• The CSS:

  Code: Select all

  /* The container */
  .boxIn {
      display: table;
      table-layout: fixed;
      border: 2px solid rgb(33,150,243);
      border-radius: 18px;
      overflow: hidden;
      width: 500px;
      height: 50px;
      background-color: rgb(33,150,243);
  }
  .container {
      display: table-cell;
      position:relative;
      cursor: pointer;
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color: transparent;
      vertical-align: middle;
      background-color: rgb(33,150,243);
      overflow: hidden;
  }
  
  .text {
  	width: 100%;
  	align-self: center;
      text-align: center;
  }
  
  /* Hide the browser's default radio button */
  .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
      position: absolute;
      display: flex;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: white;
      color: rgb(33,150,243);
      text-align: center;
  }
  
  .container:first-child {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
  }
  .container:last-child {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
  }
  
  .container ~ .container {
      border-left: 3px solid rgb(33,150,243);
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
      background-color: #8fc9f9;
      color: white;
  }
  
  /* When the radio button is checked, add a blue background */
  .container input:checked ~ .checkmark {
      background-color: rgb(33,150,243);
      color: white;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
      content: "";
      position: absolute;
      display: none;
  }

• The HTML Template:

  Code: Select all

  <div class="boxIn">
  <label class="container">
    <input type="radio" checked="checked" name="radio"><span class="checkmark"><span class="text">One</span></span>
  </label><label class="container">
    <input type="radio" name="radio"><span class="checkmark"><span class="text">Two</span></span>
  </label><label class="container">
    <input type="radio" name="radio"><span class="checkmark"><span class="text">Three</span></span>
  </label><label class="container">
    <input type="radio" name="radio"><span class="checkmark"><span class="text">Four</span></span>
  </label>
  </div>

• The JS:

  Code: Select all

  pui.retrieveCustomLayoutTemplate("buttongroup");
  
  pui.addCustomProperty({
  	name: "buttongroup",
  	help: "",
  	controls: ["buttongroup", "btn-group win-button-group", "btn btn-default win-button win-button-secondary"],
  	category: ""
  });
  pui.widgets.add({
  	name: "button group",
  	newId: "buttongroup",
  
  	defaults: {},
  
  	propertySetters: {
  		"field type": function (params) {
  			var html = pui.layout.templates["buttongroup"];
  			params.dom.innerHTML = html;
  			var body = params.dom.getElementsByClassName("buttongroup");
  		},
  
  	}
  });
  
  pui.toolbox.add({
  	category: "CSS Buttons",
  	widget: "button group",
  	text: "buttongroup",
  	value: "test",
  
  	proxyHeight: 23,
  	proxyWidth: 72,
  	proxyHTML: pui.layout.templates["buttongroup"],
  
  	defaults: {}
  });
  

• The Result:
  I'm clicking the button and off the button group in this gif to show that the color stays.

  

  Radio Button Gif.gif (43.39 KiB) Viewed 2964 times

I hope this helps!

~MEGAN BOND
Technical Support Specialist
support@profoundlogic.com