@empathyco/x-components
Version:
Empathy X Components
50 lines (33 loc) • 1.97 kB
Markdown
---
title: BaseEventButton
---
# BaseEventButton
Component to be reused that renders a `<button>` with the logic of emitting events to the bus
on click. The events are passed as an object to prop XEvent.
The keys are the event name and the values are the payload of each event. All events are
emitted with its respective payload. If any event doesn't need payload a `undefined` must be
passed as value.
## Props
| Name | Description | Type | Default |
| --------------------- | ----------------------------------------------------------------------- | --------------------------------------------- | ------------- |
| <code>events</code> | An object where the keys are the XEvent and the values are the payload. | <code>Partial<XEventsTypes></code> | <code></code> |
| <code>metadata</code> | The metadata property for the request on each query preview. | <code>Omit<WireMetadata, 'moduleName'></code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
## Examples
### Basic example
The event prop is required. It will render a <button></button> that emits the event passed as prop
with the value as payload on click:
```vue
<BaseEventButton :events="{ myEvent: payload }" />
```
If the event doesn't need payload then `undefined` must be passed:
```vue
<BaseEventButton :events="{ myEvent: undefined }" />
```
It can emit multiple events at the same time:
```vue
<BaseEventButton :events="{ myFirstEvent: payload1, mySecondEvent: payload2 }" />
```