> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/functionality/disable-trigger-buttons.md).

# Disable Trigger Buttons

How to disable trigger buttons

<figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FpFoB7ssUWHswmkppR8kK%2Fimage.png?alt=media&amp;token=3898c866-e3fb-4972-ac7d-14e3eabdb8ad" alt="Screenshot of disabled button &#x22;Submit Signed Notary&#x22;"><figcaption><p>Disabling a "Submit Signed Notary" button</p></figcaption></figure>

### The JS

This labels the disabled button on screen readers. It makes it clickable but when configured in trigger buttons it will show a notification pop-up.

```javascript
/**********************************************************/
/*** Label Trigger button as disabled for accessibility ***/
/**********************************************************/
$(document).on("knack-scene-render.any", function (event, view) {
  var $disabledTriggerButton = $(".trigger-button-large-disabled");
  $disabledTriggerButton.attr('aria-disabled', 'true');
});
```

### The CSS

We create two `trigger-button` classes here to give our disabled trigger buttons a different look from active trigger buttons.&#x20;

```css
/*Large Trigger Buttons*/
.trigger-button-large {
  width: 250px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 0px gray;
  background-color: #ebebeb;
  color: #163f6e;
  padding: 10px 10px;
  font-size: 1.5em;
  text-align: center;
  display: inline-block;
}

.trigger-button-large:hover {
  cursor: pointer;
  opacity: 0.9;
  border-color: gray;
}

.trigger-button-disabled {
  border-color: gray;
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 18px;
  text-align: center;
  opacity: 0.6;
  display: inline-block;
  outline-color: transparent;
}

.disabled { cursor: not-allowed; }
```

Notably, we set the border color to gray and outline color to transparent so when a disabled button is selected, it does not bring attention to itself or shift content on the page by those few pixels. Additionally, we set the button to give it some opacity.

### How to Implement

{% stepper %}
{% step %}

### Create Detail View with Trigger an Action

Create a detail view with "Trigger an action"

<figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2F3mFDnJaWRGuY6r77eQYK%2Fimage.png?alt=media&amp;token=ee9f57b9-6cdb-45ed-a920-3302439f7b57" alt="Screenshot of Detail view"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Set Action Link text, criteria, and outcome for disabled button

Copy/paste HTML below to the Link Text for disabled button.

{% code overflow="wrap" %}

```html
<button class="trigger-button-disabled disabled"><strong>Submit</strong></button>
```

{% endcode %}

For the outcome, show a confirmation message that clearly explains why the button is disabled for the user.

<figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FqMR2Idcew0ea3k1JkQj4%2Fimage.png?alt=media&amp;token=be6ea9dd-ddd9-4ba6-b791-f9b96ff5bd74" alt="Screenshot of disabled action link in Knack view." width="341"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Create another action link that is enabled

Copy/paste HTML below to the Link Text for enabled button.

{% code overflow="wrap" %}

```html
<button class="trigger-button-large"><strong>Submit</strong></button>
```

{% endcode %}

<figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2F1uCgiKzpimoIpdAaePGh%2Fimage.png?alt=media&amp;token=a251e347-d56d-481c-844d-233e7a077dd3" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

<details>

<summary> <strong>Archive</strong> - Disable the knack action link that makes these Knack trigger buttons clickable.</summary>

This allows us to disable the knack action link that makes these Knack trigger buttons clickable.

```javascript
/****************************************************/
/*** Disable Trigger buttons from being Clickable ***/
/****************************************************/
$(document).on('knack-scene-render.any', function(event, view) {
  var $disabledTriggerButton = $(".trigger-button-large-disabled").parent();
  $disabledTriggerButton.removeClass("kn-action-link");
})
```

</details>