---

title: SpellcheckButton

---

# SpellcheckButton

A button that when pressed emits the XEventsTypes.UserAcceptedAQuery and
XEventsTypes.UserAcceptedSpellcheckQuery events, expressing the user intention to set the
spellchecked query.

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             |                                           |

## Events

This component emits 2 different events:

- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the spellchecked query
  data.
- [`UserAcceptedSpellcheckQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the spellchecked query
  data.

## Examples

### Basic example

The component sets the current spellcheckedQuery as the new query and emits the `UserAcceptedAQuery`
and `UserAcceptedSpellcheckQuery` events.

```vue
<SpellcheckButton />
```

### Customizing its contents

```vue
<SpellcheckButton>
  <template #default="{ spellcheckedQuery }">
    <span class="x-spellcheck__text">
      Set the Spellcheck as the new query: {{ spellcheckedQuery}}!
    </span>
  </template>
</SpellcheckButton>
```