@empathyco/x-components/docs/API-reference/components/search/x-components.spellcheck-button.md

Empathy X Components

---

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
<template>
  <SpellcheckButton />
</template>

<script setup>
import { SpellcheckButton } from "@empathyco/x-components/search";
</script>
```

### Customizing its contents

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

<script setup>
import { SpellcheckButton } from "@empathyco/x-components/search";
</script>
```