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

Empathy X Components

---

title: SearchButton

---

# SearchButton

This component renders a button to submit the query.

## Slots

| Name                 | Description                                      | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | _Required_. Button content (text, icon, or both) | None                                      |

## Events

This component emits the following events:

- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

<!-- prettier-ignore-start -->
:::warning
Note that no events are emitted if the query is empty.
:::
<!-- prettier-ignore-end -->

## Dynamic classes

`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML
button style when the query is empty.

## See it in action

In this example, a clickable button is rendered.

_Click the Search button to try it out!_

```vue live
<template>
  <SearchButton />
</template>

<script>
import { SearchButton } from '@empathyco/x-components/search-box'

export default {
  name: 'SearchButtonDemo',
  components: {
    SearchButton,
  },
}
</script>
```

### Play with default slot

Here text is passed in the default slot instead of an icon to customize the button content.

_Click the icon button to try it out!_

```vue live
<template>
  <SearchButton>Search</SearchButton>
</template>

<script>
import { SearchButton } from '@empathyco/x-components/search-box'

export default {
  name: 'SearchButtonDemo',
  components: {
    SearchButton,
  },
}
</script>
```

### Play with events

In this example, the `UserPressedSearchButton` event has been implemented so that when you enter a
search term and click the Search button, the search term is displayed as a message.

_Type any term in the input field and then click the Search button to try it out!_

```vue live
<template>
  <div>
    <div style="display: flex;">
      <SearchInput />
      <SearchButton
        @UserPressedSearchButton="
          query => {
            message = query
          }
        "
      />
    </div>
    {{ message }}
  </div>
</template>

<script>
import { SearchInput, SearchButton } from '@empathyco/x-components/search-box'

export default {
  name: 'SearchButtonDemo',
  components: {
    SearchInput,
    SearchButton,
  },
  data() {
    return {
      message: '',
    }
  },
}
</script>
```

## Extending the component

Components can be combined and communicate with each other. Commonly, the `SearchButton` component
communicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when
you enter a search term and click the Search button, the “Looking for results” message is displayed.

_Type any term in the input field and then click the Search button to try it out!_

```vue live
<template>
  <div>
    <div style="display: flex;">
      <SearchInput />
      <SearchButton @UserAcceptedAQuery="message = 'looking for results'">Search</SearchButton>
    </div>
    {{ message }}
  </div>
</template>

<script>
import { SearchButton, SearchInput } from '@empathyco/x-components/search-box'

export default {
  name: 'SearchButtonDemo',
  components: {
    SearchButton,
    SearchInput,
  },
  data() {
    return {
      message: '',
    }
  },
}
</script>
```