> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/overview/events/triggers/click-triggers.md).

# Click Triggers

## Use Cases 

* Click a button to select a specific tab  

## Usage Notes 

### `sa-trigger-click` = ( *event name* ) 

Place on any element that should be invoke the specified event when it is clicked.  

Assign whatever event name you like, depending on your trigger-event-action setup. 

## Example  

This is a simple *mirror-click* setup.  Clicking the link clicks the corresponding button.  they are connected by virtue of the Event name. 

Trigger;

```html
<a sa-trigger-click="my-event">Click me</a>
```

Action;

```html
<button sa-action-click="my-event">Hidden button</button>
```

## Future&#x20;

### Link Triggers&#x20;

Place on a container, esp. a rich text element.&#x20;

#### `sa-trigger-click:context` = `child-links`&#x20;

{% hint style="success" %}
This changes the trigger setup so that the parent element is ignored, and only links within it are triggered.&#x20;
{% endhint %}

Generally you would also also specify a namespace;&#x20;

#### `sa-trigger-click:ns` = ( *namespace* )&#x20;

### Link Triggers | Example&#x20;

{% code overflow="wrap" %}

```html
<div class="w-richtext" sa-trigger-click="*" sa-trigger-click:context="child-links" sa-trigger-click:ns="myns">
  <p>Some text and <a href="##mylink">a link</a></p> 
</div>
```

{% endcode %}

In this example;

* A Webflow Richtext element is being used&#x20;
* The `:context` attribute is used and specifies `child-links`&#x20;
* The `:ns` attribute is used and specifies `myns` as the namespace name&#x20;
* Within it is a link, with an href of `##mylink`&#x20;

In this setup;&#x20;

* All links beginning with `##` are treated as SA5 Triggers.&#x20;
* The event name they trigger follows the `##`, in this example the event name is `mylink`&#x20;
* They are handled as click triggers due to the attribute on the rich text element, and the :context setting&#x20;

Inside,&#x20;

`##link2`&#x20;

This is a click trigger for that event&#x20;

In this example;&#x20;

The event fired on link click will be `ns1.link2` &#x20;

Consider sa-trigger-click:\*   as the indicator for children&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://attr.sygnal.com/overview/events/triggers/click-triggers.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.