> For the complete documentation index, see [llms.txt](https://docs.matestack.io/matestack-ui-vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.matestack.io/matestack-ui-vuejs/built-in-reactivity/emit-client-side-events/onclick-component-api.md).

# Onclick Component API

The `onclick` component renders an `a` tag that emits a client side event when the user clicks on it. Other component may react to this event.

The onclick component takes a block in order to define its appearance.

## Parameters

### emit - required

Takes a string or symbol. An event with this name will be emitted using the Matestack event hub.

**You currently cannot pass in an event payload.**

### **\&block - required**

The passed in block defines the appearance of the onclick component. The UI structure defined in this block will be wrapped with an `a` tag.

## Examples

### Emitting an event which triggers an asynchronous rerendering via `async`

```ruby
class ExamplePage < Matestack::Ui::Page

  def response
    onclick emit: "abc" do
      button "rerender something"
    end
    async rerender_on: "abc", id: "some-unique-id" do
      plain "Rerender this text when the 'abc' event is emitted #{DateTime.now}"
    end
  end

end
```


---

# 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:

```
GET https://docs.matestack.io/matestack-ui-vuejs/built-in-reactivity/emit-client-side-events/onclick-component-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.