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 (name - type - description)
default

Events

This component emits 2 different events:

• UserAcceptedAQuery (opens new window): the event is emitted after the user clicks the button. The event payload is the spellchecked query data.
• UserAcceptedSpellcheckQuery (opens new window): 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.

<template>
  <SpellcheckButton />
</template>
<script setup>
import { SpellcheckButton } from '@empathyco/x-components/search'
</script>

Customizing its contents

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