OutSystems UI Web missing Button Load

Migrating to the OutSystems UI from Silk seems to be quite the chore, which we are planning to do in the future.

Unfortunately, one of the features we use extensively to prevent multiple user clicks on a button within silk is the Button Load class (see: https://silkui.outsystems.com/Patterns_Web.aspx#Web_Controls_Buttons)

This class is missing from OutSystemsUI web and is integral to migrating an application that has actions that may take a long time to run (such as generating large reports on hundreds of thousands of rows of data within our database.)

Are there plans to add this in the future? Is there an ETA on when missing components from OutSystemsUI that exist in Silk will be transferred?

Braxton Bragg

Hey Braxton!

Without having any insight on what's the evolution path for OutSystems UI, I can think of at least a simple way of keeping that functionality:

Although the class may not exist (yet?) in OutSystems UI... wouldn't it be possible to copy the class definitions from Silk UI and add them to your own Theme? If it ever gets implemented in a future version of OutSystems UI, it's a simple matter of deleting your class definition from the Theme and all your applications would be using the new one.

Hope this helps ease the transition pain!

Just an extra note, you need to copy more than just the CSS classes that are in Patterns_SilkUI @ WebPatterns

The expected behavior is done by JS that exists on SilkUICommon WB @ WebPatterns

.Button.Loading {
    pointer-events: none;

.Button.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loadinggrey.GIF);
    background-size: 16px 16px;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    margin-top: -2px;
    vertical-align: middle;
    width: 16px;

.Button.ButtonDefault.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loading.GIF);

.Button.Small.Loading:before {
    margin-top: 4px;

.Button.Loading.Icon:before {
    margin-right: 0;

.Button.Loading span.fa {
    display: none;

/* Load button function                                                         */

function loadingButtons() {

    this.init = function() {

    function onReady() {

    function addEvents() {
        $('.Button.Load').on('click', setLoadingButton);

    function setLoadingButton() {
        var hasValidation = $(this).attr("onclick") && $(this).attr("onclick").indexOf("ClientValidate") >= 0;
        if(!hasValidation || (hasValidation && OsPage_ClientValidate(this.id))) {

    function resetLoadingButtons() {
        $('.Button.Load.Loading').each(function() {

    return this;